css3 transform

兼容性：IE10+

transform:rotate(deg)

正数为顺时针，负数为逆时针

<p>transform:rotate</p>

transform:translateX(x)

transform:translateY(y)

transform:translate(x,y)

第二个值可省略，省略时默认第二个参数为0

transform:scaleX(x)

transform:scaleY(y)

transform:scale(x,y)

如果只有一个参数，则默认为等比例缩放

transform:skewX(xdeg) 正数逆时针，负数顺时针

transform:skewY(ydeg) 正数顺时针，负数逆时针

transform:skew(xdeg, ydeg)  第二个参数可以不填写，默认为0

3d 转换

tranform:rotateX(x)  沿X轴旋转

transform:rotateY(y) 沿y轴旋转

transform:rotateZ(z) 沿z轴旋转

transform:rotate3d(x,y,z,deg)

rotate3d 旋转角度根据比例计算：

x²+y²+z²=1

计算每个轴所占的比例*deg

计算：如rotate3d(1,2,1,90deg)
则 x²+(2x)²+x²=1
得 x=根号6/6
则 三个轴旋转的角度分别为 根号6/6*1 根号6/6*2 根号6/6*1

---

transform:translateX 水平，与2d一样

transform:translateY 竖直，与2d一样

transform:translateZ z轴方向，视觉上没有区别，常用于遮罩

transform:translate3d(x,y,z)

transform:scaleX 与2d一样

transform:scaleY 与2d一样

transform:scaleZ 视觉上看没有区别

transform:scale3d(x,y,z) 参数不可省略

transform坐标系统

默认中心为元素的几何中心

更改原点: transform-origin

transform-style: flat | preserve-3d

嵌套元素是否显示3d效果

默认为flat，按照正常顺序排列，无3d效果

perspective:none | 数值

perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定

三维元素在观察者后面的部分不会绘制出来，即z轴坐标值大于perspective属性值的部分

属性值为0或负值或none（none是默认值）时，没有透视效果

perspective-origin 透视中心点

backface-visibility: visible | hidden;

背面是否可见

默认为可见