缩放属性

最后更新：2026-09-13

scale 缩放属性

scale 是 transform 的一个独立属性，用于在 2D 或 3D 空间中按比例放大或缩小元素。作为独立属性，它可以与 translate、rotate 等其他变换分开控制，特别适合需要单独动画化缩放效果的交互场景，如按钮点击反馈、图片放大预览等。

scale: none | <number> [<number> [<number>]?]?;

值	类型	描述
`none`	关键字	无缩放
`<number>`	类型	缩放倍数（可指定 x y z）

编辑下方代码，在 playground 中查看实时效果：

浏览器	Chrome	Edge	Firefox	Safari	Opera
scale	✓ v57	✓ v12	✓ v52	✓ v10.1	✓ v44
所有主流浏览器均支持

提示： 1 个值表示 X、Y 等比缩放；2 个值分别控制 X、Y 轴；3 个值可额外控制 Z 轴（需配合 perspective）。

注意： 缩放值为 0 会让元素完全消失；负值会让元素翻转（如 scale(-1) 实现镜像效果）。

Qscale 会影响元素的实际尺寸和布局吗？

A不会。scale 只是视觉上的缩放，元素在文档流中仍占据原始尺寸和空间，周围元素位置不变。这与 width/height 完全不同，也意味着缩放后的元素可能溢出容器或遮挡相邻内容，需要自行处理视觉边界。

Qscale 和 width/height 改变有什么区别？

Awidth/height 改变会改变布局尺寸，触发重排，把周围元素推开，性能较差；scale 只做视觉缩放，不影响布局，会进入合成层由 GPU 渲染，动画流畅。需要「动效放大」时用 scale，需要真正改变布局尺寸时用 width/height。

Qscale 和 zoom 有什么区别？

Ascale 是标准 CSS 变换，只改变视觉大小，不改变布局空间，动画走合成层，性能好；zoom 是非标准属性，会同时改变元素的实际布局尺寸和子元素渲染，影响文档流并触发重排。跨浏览器一致性、动画性能上 scale 都更优，生产环境优先用 scale。

Q怎么用 scale 实现镜像翻转？

A负值缩放会沿对应轴翻转：scale: -1 表示沿 X 轴水平镜像（左右颠倒），scale: 1 -1 表示沿 Y 轴垂直翻转。镜像只翻转视觉，不影响布局。可以配合过渡或动画实现「翻面」效果，但注意翻转后文字也会颠倒，需要时再用 transform 组合多次变换修正。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。