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