变形 transform
变形可以改变盒子在平面内的形态(位移、旋转、缩放等等)
2D转换
1 位移 translate
translate可以让盒子沿着x轴或者y轴来移动。
语法:
transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
问题:
-
他和margin有啥区别。
-
margin移动盒子会影响其余的盒子。把其他人挤走。
-
位移translate移动盒子不会影响其他的盒子。不脱标。
-
注意:
移动的时候可以写百分比,如果使用的百分比,移动的是盒子自身的宽度
2 旋转 rotate 旋转可以让盒子旋转角度。
语法: transform: rotate(45deg); 一定写单位
如果是正度数,则是顺时针旋转
如果是负度数,则是逆时针旋转
2.1 设置中心点 transform-origin
/* 设置旋转的中心点位置 */ transform-origin: right bottom;
2.2 多形态变形小技巧
1.1 如果需要移动,也需要旋转,则一定先写移动,后写旋转, css属性书写顺序影响代码执行。
transform: translate(-50%, -50%) rotate(360deg);
1.2 注意,多个值之前用 空格隔开。
3 缩放 scale
语法: transform: scale(1.2);
它比这宽度和高度最大的优势
: 他是用中心点来进行缩放的,同样他不会影响其他的盒子。
4 渐变
基本语法background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))