1.2D转换之移动translate(类似定位)
1.语法
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
2.重点
1.定义2D转换中的移动沿着X和Y移动元素
2.translate最大的优点,不会影响到其他元素位置
3.translate中的百分比单位是相对于自身的translate:(50%,50%)
4.对行内元素没有效果
1.语法
transform-origin:x y;
2.重点
1.注意后面的参数x和y用空格隔开
2.x和y默认转换的中心点是元素的中心点(50% 50%)
3.还可以给x y设置像素或者方位名词(top bottom left right center)
3.2D转换之缩放scale(可以给元素放大缩小)
1.语法
transform:scale(x,y);
2.重点
1.注意其中的x y 用逗号分隔
2.transform:scale(2,2);宽和高放大了两倍
3.transform:scale(2);宽和高放大了两倍
4.transform:scale(0.5,0.5);缩小0.5倍
5.最大优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。
4.2D转换综合性写法
注意:
同时使用多个转换,且格式为:transform:translate(),rotate(),scale()等
其顺序会影响转换的效果
当我们同时有位移和其他属性的时候,要把位移放到最前。
5.CSS3动画
5.1.动画的基本使用
制作动画的步骤
1.定义动画
2.调用动画
语法:用keyframed定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
200px;
}
调用:animation-name:动画名称;
animation-during:持续时间;
5.2动画属性
属性 描述
@keyframes 规定动画
animation 所有动画的简写属性,除了animation-play-state属性
animation-name 限定@keyframes动画的名称(必须的)
animation-duration 规定动画完成一个周期所花费的时间或秒默认为0(必须的)
animation-timing-function 规定动画的速度曲线,默认是ease
animation-delay 规定动画何时开始,默认为0
animation-iteration-count 规定动画播放的次数,默认为1,还可以设置infinite
animation-direction 规定动画是否在下一周逆向播放 ,默认normal,还可以设置alternate逆向
animation-play-state 规定动画是否运行或暂停,默认是running ,还有pasued
animation-fill-mode 规定动画结束后状态保持forwards,回到起始位置backwards
5.3动画简写属性
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
5.4速度曲线调节
值 描述
linear 动画从头到尾匀速
ease 默认,动画以低速开始然后加快到结束变慢
ease-in 动画以低速开始
ease-out 动画以低速结束
ease-in-out 动画以低速开始和结束
steps() 指定函数中的间隔数量(步长)
6.3D转换
1.移动translate3d
transform:translate3d(x,y,z)
2.透视perspective
1.产生的视觉近小远大
2.透视的单位是像素
3.透视写在被观察元素的父盒子上面
3.3D旋转rotate3d
transform:rotateX(deg)沿着X正方向旋转deg度 左手法则,大拇指指向x轴正向
transform:rotateY(deg)沿着Y正方向旋转deg度 左手法则,大拇指指向y轴正向
transform:rotateZ(deg)沿着Z正方向旋转deg度
transform:rotate3d(x,y,z,deg)沿着正方向旋转deg度,其中xyz显示1或0
4.3D呈现transform-style
控制子元素是否开启三维立体环境
transform-style:flat子元素不开启3D空间默认的
transform-style:preserve-3d子元素开启立体空间
代码写给父级,但是影响的是子盒子
这个属性很重要后面必用