CSS - scale()



CSS 中的 scale() 函式用於在二維平面上對元素應用縮放變換(調整大小)。該函式可以以不同的比例水平和垂直調整元素的大小,因為縮放量由向量 [sx, sy] 定義。結果是 <transform-function> 資料型別。

  • 縮放變換由一個二維向量確定,其座標指定每個方向上的縮放或調整大小的程度。

  • 當兩個座標相等時,縮放將是均勻的(各向同性的),並且元素的縱橫比將保持不變。這種形式的縮放變換稱為相似變換

  • 如果座標值超出 [-1, 1] 範圍,則元素將在指定的維度上增長。

  • 如果座標值在 [-1, 1] 範圍內,則元素將在指定的維度上縮小。

  • 如果座標值為負,則會導致在指定維度上發生點反射

  • 當值為 1 時,它對元素的大小沒有影響。

使用 scale() 函式只能在二維平面上進行縮放。為了在三維平面上實現縮放,需要使用 scale3d() 函式。

可能的值

scale() 函式可以接受一個或兩個值作為引數,表示每個方向上要應用的縮放量。

  • sx:這是一個 <number><percentage> 值,表示縮放向量的橫座標(水平,x 座標)。

  • sy:這是一個 <number><percentage> 值,表示縮放向量的縱座標(垂直,y 座標)。當未為 sy 指定值時,它預設為 sx 的值,這會導致均勻縮放,從而保持元素的縱橫比。

語法

transform: scale(sx) | scale(sx, sy);

無障礙性問題:網站上動畫的調整大小或縮放對於使用者介面來說是一個棘手的問題。因此,如果您想在網頁上包含動畫縮放,則應為使用者提供一個控制元件,以便他們可以關閉動畫。

CSS scale() - 同時縮放 X 和 Y 維度

以下是一個同時在 scale() 函式中傳遞 X 和 Y 維度的示例,其中 scale(0.6) 等效於 scaleX(0.6) scaleY(0.6)

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      border: 2px solid black;
   }

   .scale-single-value {
      background-color: pink;
   }

   #xy:hover {
      transform: scale(0.6);
   }
   </style>
   </head>
   <body>
      <section>
         <p>No function</p>
         <div></div>
      </section>

   <section>
      <p>scale(0.6)</p>
      <div id="xy" class="scale-single-value"></div>
   </section>
   </body>
   </html> 

CSS scale() - 分別縮放 X 和 Y 維度

在下面的示例中,X 和 Y 維度分別傳遞,其中 scale(0.5, 0.8) 等效於 scaleX(0.5) scaleY(0.8),並且 transform-origin 設定為 right

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: cyan;
      border: 2px solid black;
   }

   .scale-double-value {
      background-color: lightgreen;
   }

   #x-y:hover {
      transform: scale(0.5, 0.8);
      transform-origin: right;
   }
   </style>
   </head>
   <body>
      <section>
         <p>No function</p>
         <div></div>
      </section>

   <section>
      <p>scale(0.5, 0.8)</p>
      <div id="x-y" class="scale-double-value"></div>
   </section>
   </body>
   </html>  
廣告