3D转换
transform : translate3D( x ,y,z)
transform:translateZ();xyz轴都可以
perspective:1000px;近大远小
transform-style:preserve-3D;转换3D效果
transform:rotateX();沿着x轴旋转
transform:rotateY();
透视使用perspertive
属性(添加给父级)
perspertive:值
取值:像素单位数值,数值一般在800-1200
呈现立体图形
transform-style:preserve-3d
空间缩放
transform:scaleX(倍数);
transform:scaleY(倍数);
transform:scaleZ(倍数);
transform:scale3d(x,y,z);
动画
1.定义动画
@keyframes 动画名称 {
from{}
to{}
}
@keyframes 动画名称 {
0% { }
10% {}
15% {}
100% {}
}
2.使用动画
animation:动画名称 动画时间;
动画属性
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
3:重复3次播放
animation: change 1s linear;
分布动画
3:重复3次播放
animation: change 1s steps(3) 1s 3;
无限循环
animation: change 1s infinite alternate;
动画回到默认状态
animation: change 1s backwards;
动画定到最终状态
animation: change 1s forwards;
注意:
名称和时长必须赋值
取值不分先后顺序
如有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间