对元素进行变形。

相关样式：

1. transform-origin 设置一个元素变形的原点

transform-origin: center; // 默认
transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px; // 60 -》 z

2. transform-style

设置元素的子元素是位于 3D 空间中还是平面中。

transform-style: flat;
transform-style: preserve-3d;

3. transform-box

transform-box: border-box; // 使用边框作为参考框。表的参考框是包裹着该表的边框，而不是其表框。
transform-box: fill-box; // 使用对象边界框作为参考框。
transform-box: view-box; // 使用最近的SVG视口作为参考框
transform-box: content-box;
transform-box: stroke-box;

4. perspective 指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

perspective: 800px;

5. perspective-origin 指定了观察者的位置，用作 perspective 属性的消失点。

perspective-origin: top left;
perspective-origin: 50% 50%;

6. backface-visibility 指定当元素背面朝向观察者时是否可见

backface-visibility: visible;
backface-visibility: hidden;

方法有：

1. 移动：translate

transform: translateX(50px);
transform: translateY(30px);
transform: translate(20px, 40px);
transform: translate3d(5px, 22px, 3px);

2. 缩放：scale

transform: scaleX(3.5);
transform: scaleY(0.5);
transform: scale(1.5, 0.3);
transform: scale3d(3.5, 0.5, 3.5);

3. 旋转：rotate

transform: rotateX(80deg);
transform: rotateY(20deg);
transform: rotate(30deg);
transform: rotate3d(5, -25, 11, 32deg);

4. skew：倾斜

transform: skewX(20deg);
transform: skewY(50deg);
transform: skew(10deg, 40deg);

5. matrix：矩阵 matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ) 3 x 3 matrix3d(scalex,0,0,0,skewx,scaley,0,0,0,0,scalez,0,translatex,translatey,translatez,1) 4 x 4 可以省略单位

/* 2D 默认 */
transform: matrix(1, 0, 0, 1, 0, 0);
/* 3D 默认 */
transform: matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

matrix(1,0,0,1,30,30) === translate(30,30)

参考：
www.zhangxinxu.com/wordpress/2…
github.com/Ztachi/lear…
www.jianshu.com/p/52e0018e6…