scale

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

CSS 属性 scale 允许你可以分别且独立地指定 CSS 属性 transform 缩放的比例。这更好地映射到典型的 UI（用户界面）用法中，并免去了在指定变换值时必须记住变换函数的精确顺序的麻烦。

语法

css

/* 关键值 */
scale: none;

/* 单个值 */
/* 设定比 1 大的数值使该元素变大 */
scale: 2;
/* 设定比 1 小的数值使该元素缩小 */
scale: 0.5;

/* 两个值 */
scale: 2 0.5;

/* 三个值 */
scale: 2 0.5 2;

取值

单一数值: 单一的数值即指定了一个缩放系数，同时作用于 X 轴和 Y 轴让该元素进行缩放，相当于指定了单个值的 scale()(2D 缩放) 函数。
两个长度/百分比值: 两个数值即分别指定了 2D 比例的 X 轴和 Y 轴的缩放系数，相当于指定了两个值的 scale()（2D 缩放）函数。
三个长度/百分比值: 三个数值即分别指定了 3D 比例的 X 轴、Y 轴和 Z 轴的缩放系数。相当于一个 scale3d() 函数。
none: 指定不进行缩放。

形式语法

scale = 
  none                              |
  [ <number> | <percentage> ]{1,3}

示例

HTML

html

<div>
  <p class="scale">Scaling</p>
</div>

CSS

css

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

div {
  width: 150px;
  margin: 0 auto;
}

p {
  padding: 10px 5px;
  border: 3px solid black;
  border-radius: 20px;
  width: 150px;
  font-size: 1.2rem;
  text-align: center;
}

.scale {
  transition: scale 1s;
}

div:hover .scale {
  scale: 2 0.7;
}

结果

规范

Specification
CSS Transforms Module Level 2 # individual-transforms

初始值	`none`
适用元素	transformable elements
是否是继承属性	否
计算值	as specified
Animation type	a transform
Creates stacking context	yes

浏览器兼容性

BCD tables only load in the browser