css之transform2D3D

transform 的 属性：2D转换
transform：
translate()     { transform:  translate(150px,200px)} 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标）
translatex()： 指定对象X轴（水平方向）的平移 
translatey()： 指定对象Y轴（垂直方向）的平移      translate应用：一般在移动端，滑屏显示一些东西时，为了考虑性能，用此方法替换元素绝对定位+js来让元素移动的方法。
rotate()    transform: rotate(30deg);  元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
rotateX()    元素围绕其 X 轴以给定的度数进行旋转。  
rotateY()  元素围绕其 Y 轴以给定的度数进行旋转。 
scale()      transform:scale(2,4);   元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴），值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。scale(0) 则隐藏了 
skew()       skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。  元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）  
matrix()      matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。将 div 元素旋转 30 度：transform:matrix(0.866,0.5,-0.5,0.866,0,0);

兼容性书写举例：
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);  /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px);  /* Opera */
-moz-transform: translate(50px,100px);  /* Firefox */
}
transform-origin：设置或检索对象以某个点进行变换。值：  2d转换就2个值，3d有3个值
<percentage>： 用百分比指定坐标值。可以为负值。 
<length>： 用长度值指定坐标值。可以为负值。 
left： 指定原点的横坐标为left 
right： 指定原点的横坐标为right 
top： 指定原点的纵坐标为top 
bottom： 指定原点的纵坐标为bottom 围绕底部进行变化
center①： 指定原点的横坐标为center 
center②： 指定原点的纵坐标为center 
transform-origin:top left;    transform:rotate(45deg);
-moz-transform-origin:top left;    -moz-transform:rotate(45deg);
-webkit-transform-origin:top left;    -webkit-transform:rotate(45deg);
-ms-transform-origin:top left;    -ms-transform:rotate(45deg);
linear：
线性过渡。等同于贝塞尔曲线cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease：
平滑过渡（慢快慢）。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：
由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：
由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：
由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)




transform 的 属性：3D转换
transform-style：默认值flat 平面转换2d     preserve-3d  3d转换
perspective ：井深效果    默认none      值为<length>  例如：-webkit-perspective : 100px;
transform-origin：center center -15px  ；   这里这个-15px表示Z轴向后缩15px
backface-visibility：默认visible       hidden
    visible： 指定元素背面可见，允许显示正面的镜像。 
    hidden： 指定元素背面不可见