1-1(2d).rotate---以中心点旋转,正度数为顺时针方向,负度数为逆时针方向。在无3d透视的情况效果如下。

rotate(30deg) 顺时针
rotate(-30deg) 逆时针
实例变化过程(正数)
中心线

1-2(3d).rotate---以中心点旋转,正度数为顺时针方向,负度数为逆时针方向。在有3d透视的情况如下,可见与无3d透视时表现一致。

rotate(30deg) 顺时针
rotate(-30deg) 逆时针
实例变化过程(正数)
中心线

2-1(2d).rotateX---以X轴旋转,正度数与负度数效果一样,可以看到元素在高度上变小。在无3d透视的情况效果如下。

rotateX(30deg)
rotateX(-30deg)
实例变化过程(正数)
中心线

2-2(3d).rotateX---以X轴旋转,在有3d透视的情况下,正度数是元素顶部向屏幕里面旋转,底部向屏幕外面旋转。负度数则相反。另外rotateX(30deg)与rotate3D(1,0,0,30deg)效果相同...

rotateX(30deg) 或者
rotate3d(1,0,0,30deg)
rotateX(-30deg) 或者
rotate3d(1,0,0,-30deg)
实例变化过程(正数)
中心线

3-1(2d).rotateY---以Y轴旋转,正度数与负度数效果一样,可以看到元素在宽度上变小。在无3d透视情况效果如下。

rotateY(30deg)
rotateY(-30deg)
实例变化过程(正数)
中心线

3-2(3d).rotateY---以Y轴旋转,另外rotateY(30deg)与rotate3D(0,1,0,30deg)效果相同...在有3d透视的情况下,正度数是元素左边向屏幕外旋转,右边向屏幕里面旋转。负度数则相反。

rotateY(30deg) 或者
rotate3d(0,1,0,30deg)
rotateY(-30deg) 或者
rotate3d(0,1,0,-30deg)
实例变化过程(正数)
中心线

如果要对称,必须设置父元素的宽高,并居中

rotateY(30deg)
rotateY(-30deg)
中心线

4-1(2d).rotateZ---以Z轴旋转,正度数为顺时针方向,负度数为逆时针方向。此效果与第一个rotate效果是一样。在无3d透视情况效果如下。

rotateZ(30deg)
rotateZ(-30deg)
实例变化过程(正数)
中心线

4-2(3d).rotateZ---以Z轴旋转,另外rotateZ(30deg)与rotate3D(0,0,1,30deg)效果相同...在有3d透视的情况如下,可见与无3d透视时表现一致。

rotateZ(30deg) 或者
rotate3d(0,0,1,30deg)
rotateZ(-30deg) 或者
rotate3d(0,0,1,-30deg)
实例变化过程(正数)
中心线