2D转换之移动translate

4.2 2D转换之移动translate
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位
1.语法
transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
2.重点
定义2D转换中的移动,沿着X和Y轴移动元素
translate最大的优点:不会影响其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
对行内标签没有效果
4.3 2D转换之元素转换中心点rotate
旋转360°
transform: rotate(360deg);
4.4 2D转换之缩放scale
1.里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是2倍
transform: scale(x, y);
transform: scale(2, 2);
2.修改了宽度为原来的2倍 高度 不变
transform: scale(2, 1);
3.等比例缩放 同时修改宽度和高度,我们有简单的写法 以下是宽度修改了2倍,高度默认和第一个参数一样
transform: scale(2);
4.我们可以进行缩小 小于1 就是缩放
transform: scale(0.5, 0.5);
transform: scale(0.5);
5.scale 的优势之处: 不会影响其他的盒子 而且可以设置缩放的中心点
width: 300px;
height: 300px;
transform: scale(2);
6.可以设置缩放时的中心点
transform-origin: left bottom;
4.6 2D旋转综合写法
1.同时使用多个转换,其格式为:transform:translate() rotate() scale() …等,
2.其顺序会影响转换的效果.(选旋转会改变坐标轴方向)
3.当我们同时有位移和其他属性的时候,记得要将位移放到最前