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)
实例变化过程(正数)
中心线