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

admin管理员组

文章数量:1130349

目录

• • • 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空间中呈现。

---

目录

• • • 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空间中呈现。

---

本文标签： 动画animationperspectiverotate3dtransform