共计 413 个字符,预计需要花费 2 分钟才能阅读完成。
同时使用多个转换,其格式为:
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;
参数可以百分比、 像素或者是方位名词
当我们同时拥有位移和其他属性的时候,记得要将位移放到最前面
正文完