2D变形（transform）
transform 属性允许修改CSS视觉格式模型的坐标空间
transform 属性 , 只对 block 级元素生效！
旋转（rotate）：
transform:rotate(angle);
正值:顺时针旋转 rotate(360deg)
负值:逆时针旋转 rotate(-360deg)
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转
平移（translate）：
X方向平移:transform: translateX(tx)
Y方向平移:transform: translateY(ty)
二维平移：transform: translate(tx[, ty])； 如果ty没有指定，它的值默认为0。
可设单值，也可设双值。
正数表示XY轴正向位移，负数为反向位移。
设单值表示只X轴位移，Y轴坐标不变。
例如transform: translate(100px);
等价于transform: translate(100px,0);
倾斜（skew）：
X方向倾斜:transform: skewX(angle)
skewX(45deg):参数值以deg为单位 代表与y轴之间的角度
Y方向倾斜:transform: skewY(angle)
skewY(45deg):参数值以deg为单位 代表与x轴之间的角度
二维倾斜:transform: skew(ax[, ay]);
如果ay未提供，在Y轴上没有倾斜
参数：
skew(45deg,15deg):参数值以deg为单位
第一个参数代表与y轴之间的角度
第二个参数代表与x轴之间的角度
单值时表示只X轴扭曲，Y轴不变，
如transform: skew(30deg);等价于transform: skew(30deg, 0);
考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);
skewY表示只Y轴扭曲，X轴不变
正值:拉正斜杠方向的两个角
负值:拉反斜杠方向的两个角
缩放（scale）：
transform:scale(2);
X方向缩放:transform: scaleX(sx);
Y方向缩放:transform: scaleY(sy);
二维缩放:transform: scale(sx[, sy]); (如果sy 未指定，默认认为和sx的值相同)
要缩小请设0.01～0.99之间的值，要放大请设超过1的值。
例如
缩小一倍可以transform: scale(.5);
放大一倍可以transform: scale(2);
如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5, 1)。
同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1, .5)
正值:缩放的程度
负值:不推荐使用（有旋转效果）
单值时表示只X轴,Y轴上缩放粒度一样，如transform: scale(2);
等价于transform: scale(2,2);
transform-origin(基点的变换)
transform-origin CSS属性可以更改一个元素变形的基点。
矩阵
在 2D变换 中，矩阵变换函数 matrix() 接受 6个值，语法形式如下：
transform: matrix(a, b, c, d, e, f);
这相当于，对元素应用一个如下的变换矩阵：
点(Xi,Yi,1)进行变换后的新坐标
即根据变换矩阵进行变换之后点 (xi,yi) 的坐标是(axi+cyi+e,bxi+dyi+f)
对某一元素应用旋转变换 rotate(θ),
等价于矩阵变换函数 matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)
对某一元素应用平移变换 translate(X, Y)，
等价于使用矩阵变换函数 matrix(1, 0, 0, 1, X, Y)
对某一元素应用倾斜变换 skew(α, β)，
等价于使用矩阵变换函数 matrix(1, tanβ, tanα,1, 0, 0)
对某一元素应用缩放变换 scale(scaleX, scaleY)，
等价于使用矩阵变换函数 matrix(scaleX, 0, 0, scaleY, 0, 0)
3D变形（transform）
3D缩放
在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外的
transform: scaleZ(number)
transform: scale3d(scaleX,scaleY,scaleZ);
如果只设置scaleZ(number)，你会发现元素并没有被扩大或压缩
scaleZ(number)需要和translateZ(length)配合使用，
number乘以length得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩
3D旋转
CSS3中的3D旋转主要包括四个功能函数
rotateX(angle)
rotateY(angle)
rotateZ(angle)等价于rotate(angle)
rotate3d(x,y,z)
x, y, z分别接受一个数值(number),用来计算矢量方向(direction vector)，
矢量方向是三维空间中的一条线, 从坐标系原点到x, y, z值确定的那个点，
元素围绕这条线旋转angle指定的值
3D平移
transform: translateZ(length)是3D Transformaton特有的，其他两个2D中就有
translateZ 它不能是百分比值; 那样的移动是没有意义的。
是否显示元素的背面
backface-visibility:visible（默认值，元素背面可见） || hidden;
backface-visibility属性用来设置，是否显示元素的背面，默认是显示的。
backface-visibility: keyword;
keyword有两个值，hidden和visible，默认值是visible。
backface-visibility：hideden 隐藏元素背面
一个元素分两面，但并不意味元素有厚度。在一个状态下，元素只能展现自己的一面
子元素如何在空间中展示
transform-style：flat（默认，所有子元素在2D平面呈现） || preserve-3d（所有子元素在3D平面呈现）
transform-style
这个属性指定了子元素如何在空间中展示，只有两个属性值：flat（默认）和preserve-3d
flat 表示所有子元素在2D平面呈现，
preserve-3d 表示所有子元素在3D平面呈现，
如果被扁平化，则子元素不会独立的存在于三维空间。
因为该属性不会被（自动）继承，所以必须为元素所有非叶后代节点设置该属性。
transform-style的作用:
构建3D舞台，使3d舞台有层次感
transform-style是一个不可继承属性，**他只作用于子元素**
景深（perspective）
景深（英语：Depth of field, DOF）
景深是指相机对焦点前后相对清晰的成像范围。
在光学中，尤其是录影或是摄影，是一个描述在空间中，可以清楚成像的距离范围。
虽然透镜只能够将光聚 到某一固定的距离，远离此点则会逐渐模糊，
但是在某一段特定的距离内，影像模糊的程度是肉眼无法察觉的，这段距离称之为景深。
当焦点设在超焦距处时，景深 会从超焦距的一半延伸到无限远，对一个固定的光圈值来说，
这是最大的景深
简单的理解，景深就是我们的肉眼距离显示器的距离，景深越大，元素离我们越远，
效果就不好，在我们CSS3中，perspective用于激活一个3D空间，
属性值就是景深大小（默认none无景深）
应用景深的元素称为“舞台元素”，舞台元素的所有后代元素都会受影响，
（**如果后代元素中也添加了perspective属性，效果会叠加而不是覆盖**）
transform: perspective(depth);
depth的默认值是none，可以设置为一个长度值，
这个长度是沿着Z轴距离坐标原点的距离。1000px被认为是个正常值
若使用perspective()函数，那么他必须被放置在transform属性的首位，
如果放在其他函数之后，则会被忽略
perspective: depth;
同perspective()函数一样，depth的默认值是none，可以设置为一个长度值，
这个长度是沿着Z轴距离坐标原点的距离。
他们唯一的区别是，**perspective属性是被用于元素的后代元素，而不是元素本身；
就是说，为某个元素设置perspective属性后，是对这个元素的子元素起作用，而不是这个元素本身。**
perspective-origin
同perspective属性，也是设置在父元素上，对后代元素起作用。
这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被perspective属性设置的