2D转换
2D转换之移动tanslate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
1.语法
transform: translate(x, y); 或者分开写 |
---|
transform: translateX(n); |
transform: translateY(n); |
2.重点
- 定义2D转换中的移动,沿着X和Y轴移动位置
- translate最大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的translate:(50%,50%)
- 对行内标签没有效果
2D转换之旋转rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
1.语法
transform:rotate(度数) |
---|
2.重点
- rotate里面跟度数,单位是deg
- 角度为正时,顺时针,负时,为逆时针
- 默认旋转的中心点是元素的中心点
2D转换中心点transform-origin
我们可以设置元素转换的中心点
1.语法
transform-origin: x y; |
---|
2.重点
- 注意后面的参数x和y用空格隔开
- x y 默认转换的中心点是元素的中心点(50% 50%)
- 还可以给x y设置像素或者方位名词(top bottom left right center)
2D转换之缩放scale
缩放,只要给元素添加了这个属性就能控制它放大还是缩小
1.语法
transform:scale(x,y); |
---|
2.注意
- 注意其中的x和y是用逗号隔开
- transform:scale(1,1) : 宽和高都放大一倍,相对于没有放大
- transform:scale(2,2) : 宽和高都放大两倍
- transform:scale(2) : 只写一个参数,第二个参数则和第一个参数一样,相当于 scale(2,2)
- transform:scale(0.5,0.5) : 缩小
- scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子(直接修改盒子宽度是往左右延申,修改盒子高度是往下延申;通过修改盒子的宽高度会影响其他盒子)
2D转换综合写法
注意:
- 同时使用多个转换,其格式为:transform:translate()rotate()scale()…等
- 其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
- 当我们同时有位移和其他属性时,记得将位移放到前面