rotate 和 origin 属性的用法

默认没有改变的样式

rotateX(45deg) origin默认

rotateX(45deg) origin为bottom

rotateY(45deg) origin默认

rotateY(45deg) origin为bottom

rotateZ(45deg) origin默认

rotateZ(45deg) origin为bottom

rotateZ(45deg) origin为bottom

rotateZ(45deg) origin为bottom

rotateZ(45deg) origin为bottom

以上图片明确的战士了rotate的各个维度的旋转。黑色的点即为旋转是的基准点。

translate 和 origin 属性的用法

默认没有改变的样式

translateX(45px)

translateX(-45px)

translateY(45px)

translateY(-45px)

translateZ(90px)

translateZ(-90px)

translate 的 x、y轴的转换很简单，就是沿x、y轴平移，平移方向根据值的政府来决定。z轴的转换即3D视图距离浏览器的距离增加或缩小。