CSS3转换

CSS3 2D转换

旋转rotate

通过指定的角度参数对原元素指定一个2D rotation。

transform:rotate(<angle>);

angle为正数时，顺时针旋转；负数时逆时针旋转。

移动translate

translateX(x)仅水平方向移动(x轴移动)；
translateY(y)仅垂直方向移动(y轴移动)；
translate(x,y)水平方向和垂直方向同时移动。

缩放scale

scaleX(x)仅水平方向缩放(x轴缩放)；
scaleY(y)仅垂直方向缩放(y轴缩放)；
scale(x,y)水平方向和垂直方向同时缩放。

扭曲skew

skewX(x)仅水平方向扭曲变形(x轴扭曲变形，正值时逆时针扭曲)；
skewY(y)仅垂直方向扭曲变形(y轴扭曲变形，正值时顺时针扭曲)；
skew(x,y)水平方向和垂直方向同时扭曲。

旋转rotateX（围绕x轴旋转）

rotateX方法指定对象在x轴上的旋转角度。

transform:rotateX(<angle>);

旋转rotateY（围绕y轴旋转）

rotateY方法指定对象在Y轴上的旋转角度。

transform:rotateY(<angle>);

旋转rotateZ

rotateZ方法指定对象在Z轴上的旋转角度。

transform:rotateZ(<angle>);

旋转rotate3d

rotate3d方法指定对象的3D旋转角度。

transform:rotate3d(x,y,z,angle);//参数不允许省略

缩放scaleZ

scaleZ方法指定对象的z轴缩放

transform:scaleZ(z);

缩放scale3d

rotate3d方法指定对象的3D缩放。

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

transform-origin

transform-origin属性允许你更改转换元素的位置

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

transform-style

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

transform-style:flat(默认值)|preserve-3d

perspective

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

perspective:number|none;

perspective-origin

指定透视点的位置。

perspective-origin:x-axis y-axis;

backface-visibility

指定元素背面面向用户时是否可见。

backface-visibility:visible|hidden;