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

浅浅的花香味﹌ 2023-02-22 05:11 27阅读 0赞

### 目录 ###

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