1、旋转
transform:rotate()旋转
单位：deg 度数 、 turn 圈为单位（转）、rad弧度
注： 如果想要往相反的方向旋转，那么，可以在单位里面加一个负号就行了
用法：
/*transform: rotate(45deg); 默认值 绕Z轴旋转*/
/*transform: rotateX(45deg); 绕X轴旋转*/
/*transform: rotateY(45deg); 绕Y轴旋转*/
transform: rotateZ(45deg); /*绕Z轴旋转*/
/*transform: rotate(-0.5turn);*/
/*transform: rotate(1rad);*/
2、缩放
transform: scale() 缩放 不带单位
大于1：放大，相当于放大原来的多少倍
小于1：缩小，相当于缩小多少倍
只有一个值的时候，既代表x轴，也代表Y轴
两个值的时候，第一个代表x轴，第二个代表Y轴
用法：
/*transform: scale(0.2); */
/*transform: scale(0.2,1.2);*/
/*transform: scaleZ(0.2);//在Z轴上缩放*
3、位移
transform: translate() 位移 单位是px
位移之后：原来的位置不会被其他元素占据，并且移动到其他的位置不会影响其他元素
一个值的时候代表X轴方向
两个值的时候，第一个值代表x轴，第二个值代表y轴
用法：
/*transform: translate(200px);*/
/*transform: translate(200px,100px);*/
/*transform: translateX(200px);*/
/*transform: translateY(200px);*/
transform: translateZ(200px); /*z轴要有3d的环境*/
4、倾斜
transform: skew() 倾斜 单位：角度
只有一个值的时候，往x轴方向倾斜
两个值的时候，第一个值代表x轴，第二个值代表y轴
用法：
/*transform: skew(30deg);*/
/*transform: skew(30deg,45deg);*/
/*transform: skewX(30deg);*/
/*transform: skewY(30deg);*/
总结：
1.有z轴的
transform:rotateZ() 旋转
transform: translateZ(200px) 位移
transform：scaleZ(); 缩放
2.x,y
transform: skew() 倾斜
5、变换基点
transform-origin ： 变换基点: 即变换参考点，默认是绝对中心点，也就是center center ，相当于把钉子定在哪一个点，但是这一个点需要坐标去定义，所以，就有两个值
第一个值x轴，第二个值y轴 并且两个值以空格个开
当只有一个值的时候，并且是方向值（如top），另外一个值默认为center
如果是固定的值（30px）,那么这一个值就是x轴的值，另外一个是y轴，默认为50%；
可以为负值（相当于超出盒子以外去了）
注：如果给伪类元素应把基点给默认属性（非伪类变换属性）
6、3D盒子模型
说明：3D，需要一个景深 需要一个3D的环境
perspective: 800px; （或者1200px）最好给需要3D的盒子的父级
景深：使具有三维变换的元素产生透视效果，值越大看起来距离自己就越近，元素就越大。值越小，越远，元素越小。
通常我们使用800px或者1200px ,因为这两个做3D效果是最好的
transform-style: preserve-3d; 创建3d环境 最好给要进行3d的盒子
