CSS:transform （写在hover中）

1.移动 translate

transform:translate(x,y) 水平方向 和 垂直方向 同时移动    translate（100px）则只有x轴

transform:translateX(x)  仅水平方向移动（x轴）

transform:translateY(y)  仅垂直方向移动（y轴）

transform；translateZ(100px);   物体到屏幕的距离，Z用来控制物体近大远小的具体情况，translateZ越大，看到的物体越近。（perspective透视是眼睛到屏幕的距离，物体到屏幕的距离Z应该小于透视距离perspective）

① x、y可为负值。

②( -50%,-50%) 走自己的一半

 

2.缩放 scale

 transform:scale(x,y) 水平方向 和 垂直方向 同时缩放    scale（2） x和y同时等比例缩放

 transform:scaleX(x)  水平缩放

 transform:scaleY(y)  垂直缩放

 默认为 1, 0.01 ~ 0.99 缩小，1.01~ 放大

 

3.旋转   rotate

   transform:rotate(45deg); deg是度数    正值：顺时针。 负值：逆时针。

   transform-origin:left top; 调整元素原点到左上角 (或者 10px 10px; 精确位置)

   transform:rotateX(360deg); 沿着x轴3D旋转

（图片来源于：https://www.bilibili.com/video/av15269197/?p=236）

 

4.倾斜 skew

   transform:rotate(30deg，0deg); 元素水平向上倾斜三十度

 

5. 3D     可用来制作滚动鼠标滚轮， 文字小幅度的上升展示的效果

   transform:translate3d(x,y,z);   

 ① d是小写

 ② x、y可以是px，%（%是移动自身的%多少），z只能是px