缩放 | CSS-Tricks

CSS 中的 scale 属性按比例调整元素的宽度和高度。因此，如果我们有一个 100 像素正方形的元素，将其缩放 2 倍，则尺寸会加倍到 200 像素正方形。类似地，缩放值 .5 会将尺寸减半，得到 50 像素正方形。

.element {
  width: 20px;
  height: 20px;
  scale: 2; /* Results in 40 pixels square */
}

恰好还有另一种缩放元素的方法，使用 transform 属性上的 scale() 函数，例如

.element {
  width: 20px;
  height: 20px;
  transform: scale(2); /* Results in 40 pixels square */
}

…CSS scale 属性独立于 transform 属性执行此操作，使我们能够更灵活地缩放事物，而无需将效果与其他转换链接。

语法

scale: none | <number>{1,3};

scale 属性接受 none 关键字或最多三个数值。单个数值沿 X（水平）和 Y（垂直）轴以相同的值缩放元素。如果提供两个值，则第一个值缩放 X 轴，第二个值缩放 Y 轴。如果提供三个值，则第三个值对应于 Z 轴，它在 3D 上下文中缩放元素的深度（它恰好等效于使用 transform: scale3d()）。

初始值：none
应用于：可转换元素
继承：否
计算值：指定值
动画类型：转换
创建堆叠上下文：是

值

/* Keyword values */
scale: none;

/* Single values */
scale: 2;
scale: 0.25;

/* Two values */
scale: 2 1;

/* Three values */
scale: 1 1.5 2;

/* Global values */
scale: inherit;
scale: initial;
scale: revert;
scale: unset;

none：这意味着没有缩放应用于元素；实际上与 scale: 1 相同。
<number>{1,3}：这意味着该属性接受最多三个值，这些值用于乘以元素的尺寸。

缩放不会扭曲自然布局流程

需要注意的是，scale 属性不会像 scale() 转换函数那样导致其他元素环绕它流动。这意味着元素的缩放不会导致其周围的元素重新流动，以根据该元素的缩放比例提供更多（或更少）空间。

缩放会影响子元素和后代元素

需要注意的另一件事是，scale 属性会缩放元素的所有后代。例如，假设我们在元素内部有文本。更改元素的缩放比例会同时缩放元素和文本。

过渡和动画

是的，我们可以在 CSS 过渡和动画中使用 scale。例如，我们可以使任何元素在例如悬停时在缩放比例之间平滑过渡。

当我们将 scale 与其他独立的转换属性（如 translate）结合使用时，我们甚至可以更有创意。

回退

虽然浏览器对 CSS scale 属性和其他独立转换属性的支持正在增强，但在使用 scale 时，可能值得检查一下支持情况。

.box:hover {
  transform: scale(2); /* Fallback to this */
}

@supports (scale: 1) {
  .box:hover {
    scale: 2; /* Used if support for `scale` is detected */
  }
}