该属性意为变换、转换。
其主要有以下几方面：
translate平移，具体可分为translateX、translateY、translateZ。scale缩放，具体可分为scaleX、scaleY、scaleZ。rotate旋转，具体可分为rotateX、rotateY、rotateZ。skew倾斜。
另外，transform 的效果还分为 2D 平面和 3D 立体。
2D 的坐标系有 x 轴和 y 轴。
而 3D 的坐标系则有 x 轴、y 轴以及 z 轴。
10-1.Transform Origin
transform-origin 属性用来设置 transform 的原点。
默认是 (50%, 50%, 0) 坐标点。
10-2.Transform 2D
Transform 2D 指的就是 2D 平面下的变换、转换。
需要补充的一点是，translate、scale、rotate 这三者都有 z 轴，即对应的 translateZ、scaleZ、rotateZ。
而 skew 则没有 skewZ 这种用法。
10-2-1.translate
我们来比较下，translate 的实际效果：
可以注意到，translateZ 在当前代码下并无效果，其他属性的效果正常。
TIP
translateZ 不能使用百分比设置值，而 translateX、translateY 能够设置百分比，其相对的是自身宽和高。
10-2-2.scale
scale 的实际效果：
可以注意到，scaleZ 在当前代码下并无效果，其他属性的效果正常。
10-2-3.rotate
rotate 的实际效果：
可以注意到，rotateZ 在当前代码下有效果，其他属性的效果也正常。
TIP
rotate 属性会改变 x y z 的坐标系指向。
所以在需要使用 transform 组合属性的情况下，可以先使用 translate 等属性，最后使用 rotate。
譬如：transform: translateX(50px) rotate(90deg);
10-2-4.skew
skew 的实际效果：
See the Pen Untitled by Code1994 (@code1994) on CodePen.
可以注意到，skewZ 在当前代码下并无效果，其他属性的效果正常。
10-3.Transform 3D
Transform 3D 指的就是 3D 立体下的变换、转换。
为了实现 3D 效果，除了基础的 transform 属性之外，还需要一些额外属性的配合。
本节将主要介绍该系列属性。
如下是一个 3D 效果的旋转正方体：
See the Pen transform-3d-cube by Code1994 (@code1994) on CodePen.
10-3-1.perspective
perspective 意为视角。
该属性用来声明观察者视角与元素之间的距离。
通常建议设置在 1000px 至 2000px 之间。
该属性有两种使用方式：
/* 声明在最外层容器上。这样，内部的所有元素都将在 `3d` 视角下渲染 */
perspective: 1000px;
/* 当perspective与transform属性作用于同一元素 使用下列用法 */
transform: perspective(1000px) translateZ(300px);以 translateZ 为例：
可以看到，transform 在加上了 perspective 之后，就有了移动 z 轴距离的视觉效果。
10-3-2.perspective-origin
perspective-origin 属性，我将其理解为视点。
更白话的讲，可以将其理解为人眼的观察位置。
perspective-origin: x, y;
其中 x 是相对于 x 轴原点的距离，y 是相对于 y 轴原点的距离。
10-3-3.transform-style
transform-style 设置元素的子元素是位于 3D 空间中还是平面中。
transform-style: preserve-3d | flat;
其可设置的值如下：
flat: 默认值，元素的子元素将位于平面中。preserve-3d: 元素的子元素将位于3D空间中。
10-3-4.backface-visibility
backface-visibility 属性指定当元素背面朝向观察者时是否可见。
backface-visibility: visible | hidden;
其可设置的值如下：
visible: 默认值，背面朝向用户时可见。hidden: 背面朝向用户时不可见。