同时使用多个转换,其格式为:
transform: 移动 旋转 缩放 ...等;
transform: translate() rotate() scale() ...等;
其顺序会影响转换的效果。(先旋转会改变坐标轴方向)
当我们同时拥有位移和其他属性的时候,记得要将位移放到最前面
总结
转换transform 我们简单理解就是变形有2D和3D之分
我们暂且学了三个分别是位移旋转和缩放
2D移动translate(x, y)最大的优势是不影响其他盒子 ,里面参数用% ,是相对于自身宽度和高度来计算的
可以分开写比如 translateX(x)和translateY(y)
2D旋转rotate(度数)可以实现旋转元素 度数的单位是deg
2D缩放scale(x,y)里面参数是数字不跟单位可以是小数最大的优势 不影响其他盒子
设置转换中心点transform-origin:xy;参数可以百分比、 像素或者是方位名词
当我们同时拥有位移和其他属性的时候,记得要将位移放到最前面