CSS3——转换

转换rotate语法：-webkit-transform：rotate(<angle>);角度为正，顺时针转动

转换translate语法：transform：translateX(<x-value>) translateX(x)仅水平方向移动，属于2D移动;

translateY(Y)仅垂直方向移动，属于2D移动,

transform：translate(<x-value>,<y-value>);translate(x, y)水平方向和垂直方向同时移动，属于2D移动，如果第二个参数省略了，默认为只在x方向上移动，y方向为0

scale缩放时坐标原点不是左边，而是在中线上，缩放后图片仍在父元素中间，如果第二个参数省略了，默认为两个参数是一样的，只用一个参数控制，可以保证图片不变形，等比例缩放，scale的值是一个比例，不需要单位。

skew，在X轴方向上角度为正时，逆时针转动。在Y轴方向上角度为正时，顺时针旋转，且角度变化范围是 -90deg~90deg。当只有一个参数时，第二个参数默认是0。

 

3D转换

rotate3D方法，将会调用3D渲染引擎以及GPU辅助浏览器渲染

transform：rotateX(20deg);  transform：rotateY(20deg);  transform：rotateZ(20deg);   

transform：rotate3d(x,y,z,20deg);前三个参数分别表示旋转的方向x,y,z，第四个参数表示旋转的角度，参数不允许省略。x,y,z只有零和非零的值两种效果，若三个值都为1时，可用小数点来区别每个角度变化的幅度（-1~1）。

---

transform：translateZ(z); 参数不允许省略，用于遮罩。

transform：translate3d(x,y,z)；参数不允许省略

---

transform：scaleZ(z);参数不允许省略

transform：scale3d(x,y,z);参数不允许省略

---

transform-origin属性：确定坐标的基准点

transform-origin：x-axis y-axis z-axis;

transform-origin 在二维时有两个方向的在属性值。x-axis：定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%。  y-axis：定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%。

---

矩阵matrix是转换的本质

tansform：matrix(a,b,c,d,tx,ty);

tansform：matrix(1,0,0,1,x,y);等同于transform：translate(x,y)

matrix再火狐浏览器下需要添加单位，webkit内核默认px，translate等方法需要添加单位。

矩阵matrix缩放(scale)

matrix(sx,0,0,sy,0,0)——scale(sx,sy)

矩阵matrix旋转(rotate)

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)——totate(θdeg)

矩阵matrix拉伸(skew)

matrix(1,tanθy,tanθx,1,0,0)——skew(θxdeg,θydeg)

矩阵matrix镜像对称效果只能用matrix实现，对称轴一定通过元素变换的中心点，k是对称轴的斜率

3d百年换中的矩阵：transform：matrix3d（sx,0,0,0 ,0,sy,0,0 ,0,0,sz,0 ,0,0,0,1);

---

扩展属性

transform-style属性：指定元素是怎样在三维空间中呈现

transform-style：flat | preserve-3d；

perspective属性：指定观察者与[z=0]平面的距离，使具有三维位置变换的元素产生透视效果

perspective：number | none；

perspective-origin属性：指定透视点的位置

perspective-origin：x-axis y-axis； 默认值：perspective-origin：50% 50%；

backface-visibility属性：指定元素背面面向用户时是否可见

backfance-visibility：visibility （默认值）| hidden；