CSS3-2D 转换综合写法及总结

7次阅读
没有评论

共计 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; 参数可以百分比、 像素或者是方位名词

当我们同时拥有位移和其他属性的时候,记得要将位移放到最前面

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-20发表,共计413字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码