这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战
transform 使css能够对元素进行2d、3d的转换，比如：旋转、倾斜、位移、缩放。这是通过修改CSS视觉格式化模型的坐标空间来实现的
偏移、缩放、旋转、缩放
偏移（translate（x, y）、translate3d（x, y, z））
注意点：
- 3d比2d多了一个z轴方向的偏移量，2d不能写三个参数，同样3d不能写两个参数，既不能多写，也不能写；
- 设置百分比时是以自身宽度作为参考的，与元素本身的margin、padding值无关，可以理解为参考标准盒模型;
- 当然这个属性可以拆分：
translateX(x)、translateY(y)、translateZ(z)
实例：
transform: translate(10%, 10px); | transform: translate3d(10px, 10%, 10px);
缩放（scale（x, y）、scale（x, y, z））
注意点：
-
只写一个参数的话，其实是多个相同参数的简写；
-
3d比2d多了一个z轴方向的偏移量，2d不能写三个参数，同样3d不能写两个参数，既不能多写，也不能少写；
-
缩放时，padding、border都会被计算进来，可以理解为参考IE盒模型；
-
当然这个属性可以拆分：
scaleX(x)、scaleY(y)、scaleZ(z)实例：
transform: scale(1.1, 1.2); | transform: scale3d(1.1, 1.2, 2);
旋转（rotate(angle)、rotate3d(x,y,z,angle)）
旋转时需要依据一个轴线来确定如何旋转，如图所示
x轴旋转以绿色轴为旋转中心，以此类推，红色对应y轴，蓝色对应z轴
注意点：
rorate(20deg)是绕z轴旋转的简写，一般平面情况下咱们也主要用这个旋转；- 当然这个属性可以拆分：
rorateX(deg)、rorateY(deg)、rorateZ(deg)
实例：
transform: rorate(20deg);
缩放（scale（x, y）、scale（x, y, z））
注意点：
- 只写一个参数的话，其实是多个相同参数的简写；
- 3d比2d多了一个z轴方向的偏移量，2d不能写三个参数，同样3d不能写两个参数，既不能多写，也不能写；
- 缩放时，padding、border都会被计算进来，可以理解为参考IE盒模型；
- 当然这个属性可以拆分：
scaleX(x)、scaleY(y)、scaleZ(z)
实例：
transform: scale(1.1, 1.2); | transform: scale3d(1.1, 1.2, 2);
