1.先说说css的坐标系： x轴的正方向就是水平向右的方向 y轴的正方向就是垂直向下的方向 z轴的正方向就是屏幕到用户的方向 2.位移 translate(x,y):2d位移 translateX(n) 设置x轴方向的位移 tr
1.先说说css的坐标系：
x轴的正方向就是水平向右的方向
y轴的正方向就是垂直向下的方向
z轴的正方向就是屏幕到用户的方向
2.位移
translate(x,y):2d位移
translateX(n) 设置x轴方向的位移
translateY(n) 设置y轴方向的位移
translate3d(x,y,z)：3d位移
translateZ(n) 设置z轴方向的位移
参数可以是具体的像素值，也可以是百分比（基于自己的宽高）
语法：
transform:translate(200px,0);
3.缩放
scale(x,y) 2d缩放，如果只传了一个值，则表示x,y都是这个值
scaleX(n) 设置x轴方向的缩放
scaleY(n) 设置y轴方向的缩放
scale3d(x,y,z) 3d缩放
语法：
transform:scale(2);
3.旋转
rotate() 2d旋转,顺时针方向
rotate3d(x,y,z) 3d旋转
rotateX(angle) 围绕x轴旋转
rotateY(angle) 围绕y轴旋转
rotateZ(angle) 围绕z轴旋转
语法：
transform:rotate(45deg)
要实现3d视角，需要设置
/* 3d模式 */ transform-style: preserve-3d; /* 视距 */ perspective: 1200px;
rotateX效果
transform: rotateX(360deg);
rotateY效果
transform: rotateY(360deg);
rotateZ效果
transform: rotateZ(360deg);
4.transform-origin
这个属性用来设置元素transform时的基点，默认为元素的中心，也就是center center
他的值有以下几种：
具体数值 例如50px 50px
关键字 left right top bottom center
百分比 20% 20%（基于元素大小）
我们前面的旋转的例子就是基于元素中心进行旋转的
将转换基点修改成左上角
transform-origin: 0 0;
5.scale与translate共用
如果scale()在前在前，则实际位移 = 设定的位移 * scale的倍数
建议translate写在前面
transform: translate(300px,0) scale(2) ; //以 容器的中心点来计算，容器位移了300px transform: scale(2) translate(200px,0); //以 容器的中心点来计算，容器位移了400px transform: scale(3) translate(100px,0); //以 容器的中心点来计算，容器位移了300px transform: scale(0.5) translate(200px,0); //以 容器的中心点来计算，容器位移了100px
6.translate()和rotate()共用
rotate()写在translate前面的话会改变坐标系，从而改变translate的设定，所以是要是设置多值的话，建议把translate()写在前面