scale
Baseline 2022
Newly available
Since August 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
**scale
** CSS 属性允许您分别且独立地指定缩放变换,而与 transform
属性无关。这更符合典型的用户界面使用方式,并且可以避免用户在 transform
值中指定变换函数的精确顺序。
试一试
语法
css
/* Keyword values */
scale: none;
/* Single values */
/* values of more than 1 or 100% make the element grow */
scale: 2;
/* values of less than 1 or 100% make the element shrink */
scale: 50%;
/* Two values */
scale: 2 0.5;
/* Three values */
scale: 200% 50% 200%;
/* Global values */
scale: inherit;
scale: initial;
scale: revert;
scale: revert-layer;
scale: unset;
Values
- Single value
-
一个
<number>
或<percentage>
,指定一个缩放因子,使受影响元素在 X 和 Y 轴上按相同的因子缩放。等同于使用单个值指定的scale()
(二维缩放)函数。 - Two values
-
两个
<number>
或<percentage>
值,分别指定二维缩放的 X 轴和 Y 轴缩放值。等同于使用两个值指定的scale()
(二维缩放)函数。 - Three values
-
三个
<number>
或<percentage>
值,分别指定三维缩放的 X、Y 和 Z 轴缩放值。等同于scale3d()
(三维缩放)函数。 none
-
指定不应用任何缩放。
正式定义
Initial value | none |
---|---|
Applies to | 可变换元素 |
Inherited | no |
Computed value | as specified |
Animation type | a transform |
创建 堆叠上下文 | yes |
正式语法
示例
悬停时缩放元素
以下示例展示了如何在悬停时缩放元素。显示了两个框,第一个框使用单个 scale
值,在两个轴上缩放元素。第二个框有两个 scale
值,在 X 和 Y 轴上独立缩放元素。
HTML
html
<div class="box" id="box1">single value</div>
<div class="box" id="box2">two values</div>
CSS
css
.box {
float: left;
margin: 1em;
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
scale: 1.25;
}
#box2:hover {
scale: 1.25 0.75;
}
Result
规范
Specification |
---|
CSS 变换模块 Level 2 # 单个变换 |
浏览器兼容性
BCD 表格仅在浏览器中加载