3d变换我们首先要弄清楚坐标轴的方向， 3D变形的坐标轴则是X,Y,Z三条轴组成的立体空间，X轴正方向是朝右，Y周正方向是朝下，Z轴正方向是朝屏幕外

假定都是在三维空间中，平面坐标应该更加简单，刻画一个点的向量应该: [x, y, z]

所谓变换矩阵就是指，该矩阵 X 坐标向量 可以得到变换后的新坐标，满足如下性质

<"平移"后 的坐标>= <平行移动变换矩阵>X <原始坐标>

<"缩放"后 的坐标>= <缩放移动变换矩阵>X <原始坐标>

<"旋转"后 的坐标>= <旋转移动变换矩阵>X <原始坐标>

<"斜切"后 的坐标>= <斜切移动变换矩阵>X <原始坐标>

初始化的变换矩阵

初始化的变换乘法后的结果

所以matrix3d的默认值

观察者站轴的正方向看向负方向，旋转物体，逆时针为负，顺时针为正。

其中有

可以得到旋转矩阵

移动的变换矩阵

dx: x轴移动的距离

dy: y轴移动的距离

dz: z轴移动的距离

缩放的变换矩阵

斜切是最不好理解的，符合右手定则，如果y轴斜切角度，是指垂直Y轴逆时针旋转一定的角度后的坐标

在前端开发中，我们采用的动画方案有主帧动画 、 补间动画、骨骼动画 等等

借助css3的transform，我们可以实现很流畅的补间动画

如果物体发生了上面的几种变换，可以把上面所有矩阵依次序相乘，然后就得到了最终的变换矩阵

由此我们可以看出来 一个css变换举证 M 总可以写成一个

M = SRT

其中 S 是缩放举证 R 是旋转矩阵 T是缩放举证

变换过程中，我们可以对S R T 分别实现补间动画，来进行变换动画

| animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |

| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |

| animation-timing-function | 规定动画的速度曲线。 |

| animation-delay | 规定在动画开始之前的延迟。 |

| animation-iteration-count | 规定动画应该播放的次数。 |

| animation-direction | 规定是否应该轮流反向播放动画。 |

animation-fill-mode : none | forwards | backwards | both

/*none：不改变默认行为。

forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

both：向前和向后填充模式都被应用。 */

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transform-origin: bottom right/* 设置旋转点，默认是中心点 */

参考

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ；

transform 可以用来设置元素的形状改变，主要有以下几种变形： rotate （旋转）、 scale （缩放）、 skew （扭曲）、 translate （移动）和 matrix （矩阵变形），语法如下：

none 表示不做变换； <transform-function>表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在 () 里面，用 空格 分开，例如：

所有的变形都是基于基点，基点默认为元素的中心点。用法： transform-origin: (x, y) ，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用 left 、 center 、 right ；y 可以用 top 、 center 、 bottom 。

用法： rotate(<angle>) ；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：

它有三种用法： scale(<number>[, <number>]) 、 scaleX(<number>) 和 scaleY(<number>) ；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。

移动也分三种情况： translate(<translation-value>[, <translation-value>]) 、 translateX(<translation-value>) 和 translateY(<translation-value>) ；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位： px 、 rem 等

扭曲同样也有三种情况， skew(<angle>[, <angle>]) 、 skewX(<angle>) 和 skewY(<angle>) ；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。

矩阵变形相对来说非常复杂，涉及到数学中的矩阵计算，有兴趣的同学可以研究一下： CSS3 Transform Matrix

transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：

它是用来设置哪些属性的改变会有这种平滑过渡的效果，主要有以下值：

它是用来设置转换过程的持续时间，单位是 s 或者 ms ，默认值为0；

它是来设置过渡效果的速率，它有6种形式的速率：

它是来设置过渡动画开始执行的时间，单位是 s 或者 ms ，默认值为0；

它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的简写：

animation 比较类似于 flash 中的 逐帧动画 ，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由 关键帧 组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性 keyframes 来完成逐帧动画的。

它是用来设置动画的名称，可以同时赋值多个动画名称，用 , 隔开：

它是用来设置动画的持续时间，单位为 s ，默认值为 0 ：

和 transition-timing-function 类似：

它是来设置动画的开始时间，单位是 s 或者 ms ，默认值为0：

它是来设置动画循环的次数，默认为 1 ， infinite 为无限次数的循环：

它是来设置动画播放的方向，默认值为 normal 表示向前播放， alternate 代表动画播放在第偶数次向前播放，第奇数次向反方向播放：

它主要是来控制动画的播放状态： running 代表播放，而 paused 代表停止播放， running 为默认值：

它是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写：

关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了，让我们回顾一下。 transform 我们可以理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变； transition 和 animation 它们很像 flash 中的 补间动画 和 逐帧动画 ； transition 是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等； animation 的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。