CSS3-转换之rotate

在讲解之前，我们先将我们要变换的元素看做一个正方体，为了方便理解，我标注了X、Y、Z轴以及方向，如下图：

1、rotateX(angle)

定义沿着X轴的3D旋转

如上图，第一张为俯视图，第二张是3D视图。
沿X轴顺时针旋转30度，它俯视图的宽度应该为（width*cos(pi/6)）。

2、rotateY(angle)

定义沿着y轴的3D旋转

如上图，第一张为俯视图，第二张是3D视图。
沿X轴顺时针旋转30度，它俯视图的长度度应该为（height*cos(pi/6)）。

3、 rotateZ(angle)

定义沿着z轴的3D旋转

沿着z轴顺时针旋转30度，它的长度和宽度是不变的，就相当于你转动了一个方形的转盘，它的方向沿着顺时针方向转30度。

4、rotate(angle)

定义2D旋转，正值顺时针，负值逆时针，使元素旋转，但是不变形

俯视图和3D视图相同，它是2D旋转，即在平面旋转，效果和rotateZ(angle)相似。

5、rotate3d(x,y,z,angle)

定义3D旋转。
x表示x方向的矢量；
y表示y方向的矢量；
z表示z方向的矢量；
angle表示旋转角度。
查看资料：有的显示x、y、z的值取0~1之间，但是经过测试，0表示不旋转，1表示旋转；
rotateX(angle)相当于rotate3d(1,0,0,angle)；
rotateY(angle)相当于rotate3d(0,1,0,angle)；
rotateZ(angle)相当于rotate3d(0,0,1,angle)。
理解示例如下：

如上图，第一张为俯视图，第二张是3D视图。
rotate3d是沿着x、y、z方向各旋转30度，从俯视图和3D视图可以明显看出，不做多的解释。

6、rotate3d(1,1,0,angle)

我们最后再看一个只在X和Y轴方向旋转的例子，如下图：

如上图，第一张为俯视图，第二张是3D视图。
原理如上。

如有错误，请道友指正，非常感谢！