五、transition和transform变换+3D变换

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的盒子