Css3transform-origin对其他动画的作用以及对应的坐标轴模型

Css3transform-origin对其他动画的作用以及对应的坐标轴模型

对于transform:translateX() translateY() translateZ()

设置transform-origin对以上三个动画效果无法起到任何作用,而且可以发现translateX()和translateY()的坐标轴原点总是从设置translateX()和translateY()的div元素(假设有个div标签)的左上角那一点开始的，其坐标轴如下:

而对于transform:translateZ() 标签的Z轴的正方向永远与div元素的正面朝向相同，如下图所示:

对于transform:rotateX() rotateY() rotateZ()

设置transform-origin可以为以上三个动画设置旋转的中心点，且从我们的视角来看，某个元素使用以上三个属性进行的旋转的所参照的坐标轴是与其在页面的相对于transform-origin设置的中心点有关，例如我设置如下三个div围绕立体空间中的中心点散开

那么对于其中任意一个div我们再设置一个rotateX()属性，那它们是参照哪个坐标系旋转的呢？
我们以上图的绿色的且标号为1的div举例，将该div所在平面平移至与围绕的中心点重合，那么在这个包含中心的的平面上我们可以建立一个坐标系如下所示:

对于这个绿色div1而言，用rotateX() rotateY() rotateZ()做旋转是按此坐标轴旋转的，对于其他div也同理可得，即将其所在平面平移至与围绕的中心点重合，在包含该中心点的位置的平面建立如上图的坐标系即可。