2d运用 - 3d 视距

transition

transition过度属性 添加到需要过度的元素上
时间为必写属性 all默认值 ease由快到慢默认值 linear 匀速
delay 过度的延迟

2d平移

transform:translate
移位
只写一个值，x轴位移，正值向右，负值向左
写2个值，第1个是x轴位移，第2个是y轴，正值向下，负值向上
可以写百分比，参考是盒子自身宽高
注意：2d转换不脱标，还占据原来的位置

2d 旋转

transform:rotate (360deg);
rotate（度数deg） 正值顺时针 ，负值逆时针

2d缩放 ,

放大transform:scale(2)
2d转换缩放，盒子里的所有内容都会跟着缩放，
只写一个值，是等比例缩放 值>1放大 值<1缩放
注意:不推荐写负值
写2个值，第1个是水平缩放，第2个值是垂直缩放

修改元素的基准点transform-origin
1.写2个方位值，left right center top bottom , 只写一个，另外一个值默认center
2.写数值， 第1个值是距左边的距离，第2个值是距上边的距离，可以为负值

2d 倾斜

transform:skew(45deg,20deg)
倾斜 第一个值是x轴，第2个是y轴

转换连写 注意连写 一般位移在前边
transform: 位移translate(500px) 旋转rotate(360deg)缩放 scale(2);

3d平移与视距

视距，眼睛距屏幕距离，有了视距，才有透视，添加到父元素上
	perspective：800px；
 3d位移的连写 translate3d(x轴，y轴，z轴) 
transform: translate3d(100px, 100px, 200px);

3d 旋转

 x轴正值从下往上，负值反方向 

transform: rotateX(-60deg);
y轴正值从左向右旋转 负值反方向
transform: rotateY(60deg);
z轴正值顺时针，负值逆时针
transform: rotateZ(360deg);

transform 对行内元素无效