zoom | transform:scale | |
---|---|---|
支持属性 | 百分比、数值(0与1等效)、normal关键字(相当于1) | 数值(可为负) |
是否为CSS规范 | 否 | 是 |
是否影响其他元素 | 是 | 否 |
是否受transition属性影响 | 无过渡效果 | 享受过渡效果 |
相对位移点 | 左上角 | 默认为正中,可通过transform-origin设置 |
1. zoom与scale区别图示
2. scale(-1)与rotate(180deg)区别:
无过渡属性下效果相同,而有过渡属性声明时:
scale为缩小到消失,再放大,无旋转效果,
而rotate则是旋转180°,无缩小效果。
此外,zoom与scale()应避免同时使用避免zoom属性执行两次。(但我本地测试,并未出现此问题,还是尽量避免吧。)
参考资料:鑫旭男神
https://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/
以上。