1. Web
  2. CSS
  3. scale

scale

Baseline 已广泛支持

此功能已成熟，可跨多种设备和浏览器版本使用。自 2022 年 8 月起，所有浏览器均已支持此功能。

scale CSS 属性允许您单独指定缩放变换，且独立于 transform 属性。这更符合典型的用户界面使用习惯，并省去了记住在 transform 值中指定变换函数的精确顺序的麻烦。

试一试

scale: none;

scale: 1.5;

scale: 1.7 50%;

scale: 1 -1;

scale: 1.2 1.2 2;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

语法

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;

值

单个值

一个 <number> 或 <percentage>，指定一个缩放因子，使受影响的元素沿 X 轴和 Y 轴以相同的因子进行缩放。等同于指定了一个单值的 scale()（2D 缩放）函数。

两个值

两个 <number> 或 <percentage> 值，分别指定 2D 缩放的 X 轴和 Y 轴缩放值。等同于指定了两个值的 scale()（2D 缩放）函数。

三个值

三个 <number> 或 <percentage> 值，分别指定 3D 缩放的 X 轴、Y 轴和 Z 轴缩放值。等同于 scale3d()（3D 缩放）函数。

none

指定不应用任何缩放。

正式定义

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

正式语法

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

示例

悬停时缩放元素

以下示例展示了如何在悬停时缩放元素。显示了两个盒子，一个使用单个 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;
}

结果

规范

规范
CSS 变换模块级别 2
# individual-transforms

浏览器兼容性

另见

注意：skew 不是一个独立的 transform 值

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者在 修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.