3D变换

左手坐标系

伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。
这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z 轴的正方
向。

CSS 的 中的 3D 坐标系

CSS3 中的 3D 坐标系与上述的 3D 坐标系是有一定区别的，相当于其绕着 X
轴旋转了 180 度

transform

旋转rotate

单位deg

X轴旋转 rotateX()

Y轴旋转 rotateY()

Z轴旋转 rotateZ()

注意：在沿某轴进行旋转的时候，会改变其他两个轴的方向。

位移translate

X轴位移 translateX()

Y轴位移 translateY()

Z轴位移 translateZ()

扭曲skew

单位deg

skew()

X轴方向倾斜 skewX()

Y轴方向倾斜 skewY()

缩放scale

scale()

X轴方向放大/缩小 scaleX()

Y轴方向放大/缩小 scaleY()

Z轴方向放大/缩小 scaleZ()

透视perspective

在CSS3中有一个属性能让我们以透视的方式去观察元素，perspective是用在透视元素的父元素上，也就是说一个元素具有perspective属性，其子元素就会获得透视效果

没有透视效果的子元素

具有透视效果的子元素

在父元素的基础上加了perspective

3D呈现transform-style

transform-style属性是3D空间中一个重要的属性，指定嵌套元素如何在3D空间中呈现!

transform-style：flat|preserve-3d；

flat值为默认值，表示所有子元素在2D平面呈现。

preserve-3d表示所有子元素在3D空间中呈现。

注意：transform-style属性需要设置在父元素中。

拓展：backface-visibility

设置元素背面是否可见

动画animation

animation：动画名称 动画执行一次的时间 速度 动画是否永远执行 动画延迟时间 动画执行的顺序 动画执行的次数

动画属性

animation-name

设置动画序列名称

animation-duration

属性定义动画是从何时开始播放，及动画应用在元素开始的这段时间的长度。默认值0s，表示动画在该元素上后立即开始执行。该值以秒（s）或者毫秒（ms）为单位。

animation-delay

动画延时时间

animation-timing-function

动画执行速度

配置参数值

ease，ease-in，ease-out，ease-in-out，linear

animation-play-state

定义动画播放状态

running 动画正常播放

paused 动画暂停播放

animation-direction

表示动画是否反向播放

normal 正序播放

reverse 倒序播放

alternate 交替播放

alternate-reverse 反向交替播放

animation-fill-mode

指给定动画播放前后应用元素的样式

none 动画执行前后不改变任何样式

forwards 保持目标动画最后一帧的样式

backwards 保持目标动画第一帧的样式

both 动画将会执行forwards和backwards执行的动作

animation-iteration-count

定义动画播放次数。

steps(60)

表示动画分成 60 步完成参数值的顺序：

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意

必要元素：

a、通过@keyframes 指定动画序列；
b、通过百分比将动画序列分割成多个节点；
c、在各节点中分别定义各属性
d、通过 animation 将动画应用于相应元素；

动画的序列化/动画的实现

@keyframes 动画名称{

​ 动画的分隔符from{} to{}

​ 百分比形式分割动画：每个节点可定义不同属性。

}