主页

同时使用多个转换,其格式为:

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

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

CSS3

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0
查看目录

目录

来自 《CSS3-2D转换综合写法及总结》
评论

博主很懒,啥都没有
46 文章数
7 评论量
3 分类数
49 页面数
已在风雨中度过 198天6小时30分