CSS中旋转、空间缩放、动画的属性

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个时间值，第一个时间表示动画时长，第二个时间表示延迟时间