一、2d坐标轴
2d:
x: 水平轴 水平方向 向右为正，向左为负
y：垂直轴 垂直方向 向下为正，向上为负
z：垂直于屏幕 向外为正，向内为负
2d：位移 旋转 缩放 倾斜（没有3d）
3d：位移 旋转 缩放
transform：
translare（）
rotate ()
scale()
skew()
二、2d位移
transform: translate(x,y);
x:水平位移
y：垂直位移
px
百分比：按照自身宽高来说的
注意:位移之后原来的位置还在
只给一个值，只沿水平方向位移
/* 分开写法 */
transform: translatex(300px);
transform: translatey(300px);
三、2d旋转
transform: rotate(deg);
deg:度数
默认绕中心轴旋转
deg为正值，顺时针旋转
deg为负值，逆时针旋转
透视点到元素的距离
1000px：找打到乔乔的距离 1000px
300px：我往前走到了300px位置看乔乔
600px：我往前走到了600px位置看乔乔
-300px：我往后走到了-300px位置看乔乔，-1300
-600px：我往后走到了-600px位置看乔乔，-1600
1000px：走到了乔乔面前看
>1000px：走过了乔乔，看不见了
四、2d缩放
如果只给一个值，宽高一起等比例缩放
transform: scale(1.5);
transform: scale(2);
缩放：缩小 放大
x:宽度
y：高度
0：
0-1
>1:放大
负数
从中心开始放大或缩小
缩放没了，但是位置还在
transform: scale(0);
负数：先翻转（180deg）在进行缩放
transform: scale(-2);
只沿水平方向缩放
transform: scaley(2);
五、2d倾斜
transform:skew()倾斜
transform:skew(x,y) 沿着x轴和y轴倾斜
transform：skew（x）沿着x轴倾斜
transform：skew（y）沿着y轴倾斜
单位deg（角度）
正值，向左上角和右下角倾斜；
负值，向右上角和左下角倾斜
为一个值的时候，只沿着水平方向倾斜
六、复合写法
多个属性空格隔开
transform: translate(200px,200px) rotate(45deg) scale(1.5);
旋转缩放位移倾斜
七、3d空间
创建网页3d空间
取值：800-1000px
透视点到元素的距离
近大远小
给父元素或者body加
perspective: 1000px;