rotate // 旋转

2D旋转

rotate()

transform: rotate(30deg);

顺时针旋转

3D旋转

接受单个值/角度值

rotateX()
rotateY()
rotateZ()

接受四个值

rotate3d()

x轴y轴z轴
y轴向下才是正数，与之前看到的y轴有区别
z轴是垂直与0点的轴这里为展示z轴故这样画的

每次旋转中坐标轴也是会跟着元素一起旋转的**多次旋转是需要先后顺序的
初始图片位置 本次演示时旋转的圆心的位置为 （0, 0）也就是图片左上角

rotateX(45deg)
旋转示意图

旋转后示意图
每次旋转中坐标轴也是会跟着元素一起旋转的**多次旋转是需要先后顺序的

rotateZ(45deg)
旋转示意图
Z轴垂直与旋转中心 也就是o点 此处的旋转中心为图片的左上角

旋转后的示意图
每次旋转中坐标轴也是会跟着元素一起旋转的**多次旋转是需要先后顺序的

rotate3d()**

transform: rotate3d(x,y,z,angle);

这里面的x,y,z这三个值确定一个空间矢量值，这三个值填啥不重要，他们三个的比例将会是旋转轴的位置

如图中 x轴y轴都是有刻度的z轴也是有刻度的只是此图中没有标记
假设rotate3d(1,1,1,angle)
三个数的比值为 x:y:z = 1:1:1
因为图中没有1的这这个值故这三个比值同时扩大100倍，扩大后比值是不会改变的，就是 **x:y:z = 1:1:1 = 100:100:100
x轴取其坐标为100 y轴取其**坐标为100，z轴取其坐标为100 /z轴垂直与原点此处z轴可以理解高楼的第100层 /三个位置肯定交与一点那就 位置为(100,100,100)/最后一个为z轴坐标/ 从旋转中心/此处旋转中心为图片的左上角/画一条射线，这条射线必须经过(100,100,100)这个位置，这条射线就是旋转轴

transform: rotate3d(1,1,0,45deg);

旋转前示意图
旋转中心为图片的左上角，切图片为正方形，比值1:1:0 取其交点再从旋转中心画条射线 经过此交点

旋转后示意图

每次旋转中坐标轴也是会跟着元素一起旋转的**多次旋转是需要先后顺序的
旋转后添加其辅助线

transform: rotate3d(1,1,1,45deg);

旋转中心不变，为图片的左上角

旋转前示意图

旋转示意图
黑色那条线为此次的旋转轴 绿色为x轴红色为y轴蓝色为z轴
每次旋转中坐标轴也是会跟着元素一起旋转的**多次旋转是需要先后顺序的**

旋转后示意图