CSS3-转换之rotate

在讲解之前,我们先将我们要变换的元素看做一个正方体,为了方便理解,我标注了X、Y、Z轴以及方向,如下图:
CSS3-转换之rotate_第1张图片

1、rotateX(angle)

定义沿着X轴的3D旋转
CSS3-转换之rotate_第2张图片 CSS3-转换之rotate_第3张图片
如上图,第一张为俯视图,第二张是3D视图。
沿X轴顺时针旋转30度,它俯视图的宽度应该为(width*cos(pi/6))。

2、rotateY(angle)

定义沿着y轴的3D旋转
CSS3-转换之rotate_第4张图片 CSS3-转换之rotate_第5张图片
如上图,第一张为俯视图,第二张是3D视图。
沿X轴顺时针旋转30度,它俯视图的长度度应该为(height*cos(pi/6))。

3、 rotateZ(angle)

定义沿着z轴的3D旋转
CSS3-转换之rotate_第6张图片
沿着z轴顺时针旋转30度,它的长度和宽度是不变的,就相当于你转动了一个方形的转盘,它的方向沿着顺时针方向转30度。

4、rotate(angle)

定义2D旋转,正值顺时针,负值逆时针,使元素旋转,但是不变形
CSS3-转换之rotate_第7张图片
俯视图和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)。
理解示例如下:
CSS3-转换之rotate_第8张图片 CSS3-转换之rotate_第9张图片
如上图,第一张为俯视图,第二张是3D视图。
rotate3d是沿着x、y、z方向各旋转30度,从俯视图和3D视图可以明显看出,不做多的解释。

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

我们最后再看一个只在X和Y轴方向旋转的例子,如下图:
CSS3-转换之rotate_第10张图片 CSS3-转换之rotate_第11张图片
如上图,第一张为俯视图,第二张是3D视图。
原理如上。

如有错误,请道友指正,非常感谢!

你可能感兴趣的:(css,css3,2D-3D转换,rotate)