变换：规模与传统的大小调整

Question

使用transform: scale(x.x)而不是使用width和height属性进行传统的大小调整是否有任何缺点？缩放会产生质量较低的图像吗？

Answer 1

transform:scale();不会扩展或缩小元素使用的初始空间。

100px的正方形可能看起来是200px，但仍会在屏幕上使用100px²。它会与周围的东西重叠。

Answer 2

Scale生成一般质量更好的结果（从视觉角度来看），因为许多浏览器使用高级重采样算法通过GPU（换句话说，使用硬件加速）渲染它，但它有一个缺点：< / p>

缩放对象不会在其周围创建大于原始大小的空间。

实际上......浏览器的行为如下（大约）：

1. 以原始大小呈现对象“A”
2. 在其周围放置其他对象（直到此时浏览器完全忽略scale规则声明）
3. 最后，“视觉”缩放“A”，重叠其他类似的将会在不同的层中