2D transform

1、定义：transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。
2、 2D功能函数：
（1）2D位移 translate()
说明：
translate(tx) 当参数设置一个值的时候，代表水平方向的位移；
translate(tx，ty) 第一个值代表水平方向的距离，第二个值垂直方向的距离；
translate(tx，ty, tz) 第一个值代表水平方向的距离，第二个值垂直方向的距离.第三个值沿Z轴移动（3D）
translateX(tx) 指定方向设置位移 沿X轴移动
translateY(ty) 指定方向设置位移 沿Y轴移动
translateZ(tz) 指定方向设置位移 沿Z轴移动 ( 3D)
当属性值为正值时代表的是向右或者向下移动，当为负值的时候代表向左或向上移动

	说明：属性值可以用px   也可以用%（百分比大小的参照物是元素的宽高）
	说明：translate（）位移的效果和定位里的relative的效果是类似的，都是在当前位置进行位移的，对其元素的布局是没有影响的，原来的位置的保留的。

（2）2D缩放scale()
说明： 属性值代表的是倍数，是不用加单位；
0——1 之间是缩小的效果，
大于1的时候都是放大效果；
默认值 是 1；
scale( 值1 ) 代表水平和垂直都放大或者缩小
scale( 值1，值2 ) 值1：水平方向的缩放大小 值2 ：垂直方向
属性值可以设置为负值，但是很少用；
scaleX（值） 水平方向的缩放比例
scaleY（值） 垂直方向的缩放比例
scaleZ（值） Z轴方向的缩放比例 （3D）
（3）2D旋转rotate()
说明: 属性值的单位是度（deg）
rotate() 沿着中心点旋转；只能放一个属性值 ，
正值：顺时针旋转； 负值： 逆时针旋转；
rotateX() 沿X轴旋转
rotateY() 沿Y轴旋转
rotateZ() 沿Z轴旋转 （3D）
（4）2D倾斜 skew()
说明：属性值的单位是度（deg） ；属性值为正值：向左 或向上倾斜 负值：向右或向下倾斜
skew( 值1 ) 一个值的时候 代表 沿X轴倾斜
skew( 值1，值2) 值1： 沿X轴的倾斜 值2 ：沿Y轴的倾斜
skewX（） 沿X轴的倾斜
skewY（） 沿Y轴的倾斜
说明：元素通过 transform进行变形时，都是对其他元素的布局不产生影响的。不脱离文档流。
变形时元素默认情况下都是沿着元素的中心点去变形的
当使用复合式写法的时候，他们顺讯不同，会导致结果不一样，他们执行的顺序是从后向前解析的。
transform: translate(100px) rotate(60deg);
（5）原点设置属性：transform-origin
定义：transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
说明：transform-origin：值1 值2 ； 值1： 水平 值2： 垂直
px % left top right bottom ;
6、backface-visibility ：隐藏被旋转的 div 元素的背面
backface-visibility:visible;可见 （默认值）
backface-visibility:hidden;不可见
backface-visibility的bug：如果元素翻转后结束后显示在上一层，给他加一个背景色就可以解决了。