[TOC] # matrix、matrix3d `matrix()` 用六个指定的值来指定一个均匀的二维（2D）变换矩阵。这个矩形中的常量值是不作为参数进行传递的，其他的参数则在主要列的顺序中描述。 `matrix(a, b, c, d, tx, ty)`是`matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)`的简写 > translate、scale、rotate、skew 本质上都是应用的matrix()方法实现的（修改matrix()方法固定几个值） <br> 属性值 * a b c d：以`number` 的格式来描述线性变换 * tx ty：以`number` 的格式来描述变换的量 <br> `matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ` 用一个 4 × 4 的齐次矩阵来描述一个三维（3D）变换。16个参数都在主要列的顺序中描述。 <br> 参数 * a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 d4：以 <number> 的格式来描述线性变换 * a4 b4 c4：以 <number> 的格式来描述变换的量 <br> <br> # rotate、rotate3d、rotateX, rotateY, rotateZ `rotate()` CSS 函数 定义一个旋转属性，将元素在不变形的情况下旋转到不动点周围(如 transform-origin 属性所指定) 。 移动量由指定角度定义;如果为正值，则运动将为顺时针，如果为负值，则为逆时针 。 180°的旋转称为点反射 (point reflection)。  参数 a：该参数表示 <angle> 代表旋转的角度。正角表示顺时针旋转，负角表示逆时针旋转。 <br> <br> `rotate3d(x, y, z, a)` 定义一个变换，它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正，运动将为顺时针，如果为负，则为逆时针。 <br> 在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 \[x, y, z\] 矢量定义，并且通过变换源点传递（即通过 transform-origin CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 \[0, 0, 0\]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果。 <br> 值 x： 类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。 y： 类型， 可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。 z： 类型， 可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。 a： 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。 <br> transform: rotate3d(0);  <br> transform: rotate3d(1, 1, 1, 45deg);  <br> <br> # scale、scale3d、scaleX、scaleY、scaleZ scale() CSS 函数可改变元素的大小。 它可以增大或减小元素的大小，并且缩放量由矢量定义，并且它可以使在一个方向上比另一个方向更多。 这种变换的特点是矢量的坐标可定义在每个不同方向上各子完成一定比例缩放。如果矢量的两个坐标相等，则缩放是均匀的或各向同性的，并且元素的形状被保留。在这种情况下，缩放函数定义了一个同调变换。 当超出 [-1, 1]范围外时，缩放将在坐标方向上放大元素；当在该范围内时，它在该方向收缩元素。当等于1时，它什么也不做，当它为负时，它执行点反射和大小修改。  <br> <br> # skew、skewX、skewY `skew()`这个CSS函数是一种用于拉伸，或者说是平移，该函数会使得在每个方向上扭曲元素上的每个点以一定角度。这是通过将每个坐标增加一个与指定角度成比例的值和到原点的距离来完成的。离原点越远，拉伸的值就越大。 ~~~ skew(ax) 或 skew(ax, ay) ~~~ ax：该参数为一个角度 `angle`， 表示用于沿横坐标扭曲元素的角度 。 ay：该参数为一个角度 `angle`， 表示用于沿纵坐标扭曲元素的角度 。 <br> <br> # translate、translate3d、translateX、translateY、translateZ `translate()`这个CSS 函数用于移动元素在平面上的位置。这种变换的特点是矢量的坐标定义了它在每个方向上的移动量。  参数 * tx：该参数为 `length` ，表示要移动矢量的横坐标。 * ty：该参数为 `length` ，表示要移动矢量的纵坐标。 如果不写，则默认与 tx 值相等，例如 : translate(2) 表示 translate(2, 2)。 <br> `translate3d()`这个CSS 函数用于移动元素在3D空间中的位置。这种变换的特点是三维矢量的坐标定义了它在每个方向上的移动量。 * tx：该参数为`length` ，代表移动矢量的横坐标。 * ty：该参数为 `length` ，代表移动矢量的纵坐标。 * tz：该参数为 `length` 代表移动矢量的z轴坐标。 该值不能使用百分比 `percentage` ；如果使用会被认为是无效属性。 <br> <br> # perspective 指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。 <br> 默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。 <br> 当该属性值不为0和none时，会创建新的层叠上下文。  <br> <br>  上图中眼睛位置相关的三个坐标可以借由这些属性调整： * p：`perspective` * 眼睛的x和y：`perspective-origin` <br> <br> # perspective-origin 指定了观察者的位置，在属性perspective中被用作消失点。  <br> <br> # transform-box 定义了与transform以及transform-origin属性相关的布局框 <br> 值 * border-box：使用边框作为参考框。表的参考框是包裹着该表的边框，而不是其表框。 * fill-box：使用对象边界框作为参考框。 * view-box：使用最近的SVG视口作为参考框。如果viewBox属性为创建SVG视口元素指定了一个值，则参考框位于由viewBox属性建立的坐标系的原点处，并且参考框的尺寸被设置为该viewBox属性的宽度和高度值。 <br> <br> # transform-style 确定元素的子元素是否位于3D空间中，还是在该元素所在的平面内被扁平化。 如果被扁平化，则子元素不会独立的存在于三维空间。 因为该属性不会被（自动）继承，所以必须为元素所有非叶子后代节点设置该属性。 <br> 值 * preserve-3d：指定子元素定位在三维空间内。 * flat：指定子元素位于此元素所在平面内。  <br> <br> # transform-origin [MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin) 更改一个元素变形的原点。  transform-origin: center;  transform-origin: top left;  <br> <br> # backface-visibility 指定当元素背面朝向观察者时是否可见。元素的背面总是透明的，当其朝向观察者时，显示正面的镜像。 在某些情况下，我们不希望元素内容在背面可见，比如实现翻牌效果。 因为2D变换无透视效果，故该属性对2D变换无效。 <br> <br> 值： * visible：表示背面可见，允许显示正面的镜像。 * hidden：表示背面不可见 <br> backface-visibility: visible;  backface-visibility: hidden;  # 参考资料 [transform-function - MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function) [好吧，CSS3 3D transform变换，不过如此！](https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/)