CSS - scale 属性

CSS 属性 `scale` 用于指定元素的缩放变换，独立于 `transform` 属性。

此属性对于界面使用非常方便，因为您无需记住变换函数的顺序即可在 `transform` 属性中指定。

可能的值

CSS 属性 `scale` 可以具有以下值之一：

单值：指定一个 `<number>` 或 `<percentage>` 值，沿 X 和 Y 轴按相同的值缩放元素。等效于具有单值的 `scale()` 2D 函数。
两个值：指定两个 `<number>` 或 `<percentage>` 值，沿 X 和 Y 轴按给定值缩放元素。等效于具有两个值的 `scale()` 2D 函数。
三个值：指定三个 `<number>` 或 `<percentage>` 值，分别沿 X、Y 和 Z 轴以 3D 缩放比例缩放元素。等效于 `scale3d()` 函数。
none：指定不应用任何缩放。

应用于

所有可变换的元素。

语法

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

CSS scale - 元素缩放

下面的示例演示了 `scale` CSS 属性的用法，以及传递值的各种方式。元素在悬停时会缩放。

<html>
<head>
<style>
   .box {
      display: inline-block;
      margin: 0.7em;
      min-width: 5.5em;
      line-height: 6.5em;
      text-align: center;
      transition: 2s ease-in-out;
      border: 2px solid black;
      background-color: lightgreen;
   }

   #scale-one-box:hover {
      scale: 2;
   }

   #scale-two-box:hover {
      scale: 1.5 65%;
   }

   #scale-three-box:hover {
      scale: 20% 40% 60%;
   }
</style>
</head>
<body>
   <h1>CSS Scale property</h1>
   <div class="box" id="scale-one-box">scale (x)</div>
   <div class="box" id="scale-two-box">scale (x,y)</div>
   <div class="box" id="scale-three-box">scale (x,y,z)</div>
</body>
</html>

打印页面