CSS3的动画及3D转换（animation、transform、rotate3d 、perspective等）【总结】

目录

1. 动画① 创建② 属性③ 关键帧 2. 3D① transform转换② rotate3d③ translate3d④ perspective⑤ transform-style

1. 动画

① 创建

@keyframes // 创建动画

语法：

@keyframes animationname {keyframes-selector {css-styles;}} keyframes-selector // 动画持续时间的百分比

例：

@keyframes myMove{ 0% {top:0px;} 25% {top:200px;} 50% {top:100px;} 75% {top:200px;} 100% {top:0px;} }

② 属性

animation // 动画属性的简写属性

语法：

animation：name duration timing-function delay iteration-count name：动画名称duration：动画指定需要多少秒或毫秒完成timing-function：动画效果的速度delay：延时iteration-count：value/infinite；动画播放次数animation-direction: normal|alternate；是否反向播放动画animation-play-state: paused|running；动画正在运行还是暂停

③ 关键帧

animation-timing-function：step-start/step-end 指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。step-start 动画执行时为开始左侧，端点的部分为开始。step-end 动画执行时以结尾端点为开始，默认值为 end。

2. 3D

① transform转换

语法：

transform： rotate3d()/ translate3d() rotate3d(x,y,z,angle)：旋转translate3d(x,y,z)：平移

② rotate3d

rotate3d(x,y,z,angle) x: 在x轴是否旋转，是为1，否为0；y: 在y轴是否旋转，是为1，否为0；z: 在z轴是否旋转，是为1，否为0；angle：旋转角度；rotateX(angle) ：定义沿 X 轴的 3D 旋转。正值前，负值后；rotateY(angle) ：定义沿 Y 轴的 3D 旋转。正值右，负值左；rotateZ(angle) ：定义沿 Z 轴的 3D 旋转。

③ translate3d

translate3d(x,y,z)；translateX(x)：定义 3D 转化，仅使用用于 X 轴的值；translateY(y)：定义 3D 转化，仅使用用于 Y 轴的值；translateZ(z)：定义 3D 转化，仅使用用于 Z轴的值。

④ perspective

perspective：设置从何处查看一个元素的角度

语法：

perspective: number|none; number：元素距离视图的距离，以像素计；none：默认值。与 0 相同。不设置透视；Perspective-origin：视点；perspective-origin：50% 50%；表示浏览器从正中心观察这个世界。

⑤ transform-style

transform-style：规定被嵌套元素如何在 3D 空间中显示；

语法：

transform-style: flat|preserve-3d； flat：表示所有子元素在2D平面呈现；preserve-3d：表示所有子元素在3D空间中呈现。

---