transform中的translateX/Y/Z与rotateX/Y()的使用

学习过程中发现tranform里的rotate在X与Y的使用上弄不明白,自己琢磨了一会儿，并发布在此，如有错误，还望斧正，希望能帮到大家

一：transform后的translate()与rotate()是有先后顺序的

以一个立方体为例来说,前粉 后蓝 左绿 右黄 上橙 下蓝

这是已经实现好的立方体，又加了一个带有代码opacity：0.5的立方体，方便观看
现在将其变换为实现之前

这是上下左右前后六个面重叠在一起的样子，接下来进行移动和旋转

1. 前/front

   transform: translateZ(100px);
   

2. 后/back

   transform: translateZ(100px);
   

前后只需要移动即可，无需旋转，因为我设置的立方体边长为200px，所以只需移动100px

3. 左/left
   前面说过transform有先后顺序

   transform: translateX(-100px) rotateY(-90deg);
   

   transform: rotateY(-90deg) translateZ(100px);
   

   **这两条代码最终结果相同，但第一个是先另图片左位移100px然后再沿Y轴旋转90°，第二个是先沿Y轴旋转90°再向左位移100px。

   这时候你可能会疑惑第二条代码明明是tranformZ移动，为什么却向左移动了，这一点我在下面的第二大部分进行解释，第一大部分讲先后顺序产生的效果影响**
   

4. 右/right

transform: translateX(100px) rotateY(90deg);

transform: rotateY(90deg) translateZ(100px);

第一个是先另图片右位移100px然后再沿Y轴旋转90°，第二个是先沿Y轴旋转90°再向右位移100px。

5. 上/top

transform:translateY(-100px) rotateX(90deg);

transform: rotateX(90deg) translateZ(100px);

第一个是先另图片上位移100px然后再沿X轴旋转90°，第二个是先沿X轴旋转90°再向上位移100px。

6. 下/bottom

transform: translateY(100px) rotateX(-90deg);

transform: rotateX(-90deg) translateZ(100px);

第一个是先另图片下位移100px然后再沿X轴旋转90°，第二个是先沿X轴旋转90°再向下位移100px。

最后上个图，加个透明度，聪慧如你一定看得懂

二：为什么translateZ也会向左移动

我相信，聪慧如你，一定发现了从左开始，右，上，下的第二条代码里的移动都是用的translateZ，而且他们都是先经过旋转才这样移动的，其实这是一种很方便的用法。

道理其实很简单，就是旋转改变了translateX/Y/Z的作用方向。

我放一张图片配上坐标轴方便理解，我把前注释了，上透明了0.9，左归为原位了
旋转前：


就是这样旋转后改变了坐标轴的方向，所以才会需要用translateZ
而且显然这种方式是非常方便的，因为你只要先旋转好位置，然后就不用考虑向哪移动了，统统用translateZ

三：transform:rotate的旋转方向

最后再补充点简单知识
rotateX()：以右视图顺时针为正数值，逆时针为负数值
rotateY()：以下视图顺时针为正数值，逆时针为负数值
rotateZ(): 以正视图顺时针为正数值，逆时针为负数值
rotate(): 以正视图顺时针为正数值，逆时针为负数值
3d效果是由代码
transform: rotateX(-45deg) rotateY(45deg);
transform-style: preserve-3d;
实现的。