CSS-变形transform

2D变形

transform-origin可以改变旋转的中心点，两种方式
transform-origin:left top; 左上角
transform-origin:10px 10px; 精准的位置

translate移动

元素从当前位置移动，给定left坐标和top坐标
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
可以只移动一个轴，两种写法
只移动X轴：translate(50px) translateX(50px)
只移动Y周：translate(0,50px) translateY(50PX)
translate设置的值如果是百分比，那么移动的不是父类的百分比，是自己的百分比。
实现定位的盒子居中对齐

left是移动父类的百分比，translate是移动自己的百分比。

scale缩放

transform:scale(X轴，Y轴);
小于1表示缩小，大于1表示放大；
如果只写一个值，表示X轴和Y轴等比例缩放；

rotate旋转

transform:rotate(90deg)
正值是顺时针旋转，负值是逆时针旋转
deg是新单位（度）

skew倾斜

transform:skew(Xdeg,Ydeg);
Xdeg为正值表示沿着X轴向左倾斜，负值表示向右倾斜
Ydeg为正值表示沿着Y轴向上倾斜，负值表示向下倾斜

3D变形

3D坐标：
x左边是负的，右边是正的
y上边是负的，下边是正的
z里边是负的，外边是正的

transform-style

    这是3D空间的一个重要属性，指定嵌套元素如何在3D空间中呈现，它主要有两个属性值：flat和preserve-3d，flat是默认值，表示所有子元素在2D平面呈现，preserve-3d表示所有子元素在3D空间中呈现。

rotateXYZ

分别表示沿着x、y、z轴旋转

透视perspective

透视可以将一个2D平面在转换的过程中，呈现3D的效果
透视原理：近大远小
浏览器透视：把近大远小的所有图像，透视在屏幕上
perspective：视距表示视点距离屏幕的长短，视点用于模拟透视效果时人眼的位置
perspective一般作为一个属性设置给父元素，作用域所有3D转换的子元素。他就是一个距离，模拟眼睛到屏幕的距离，视距越大，效果越不明显，视距越小，效果越明显。

translateXYZ

分别表示沿着x,y,z轴移动
也可以写在一起transform:translate3d(x,y,z)，其中x和y可以是px也可以是%，但z轴只能是px