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>

列印頁面