CSS - scaleY()

CSS 中的 scaleY() 函式用於沿垂直（Y 軸）方向對元素應用縮放變換（調整大小）。結果為 <transform-function> 資料型別。

該函式透過一個常數因子修改元素點的縱座標（垂直，Y 座標）。當縮放因子為 1 時，該函式獲得恆等變換。scaleY(-1) 指定軸對稱，其中水平軸穿過變換原點。

可能的值

函式 scaleY() 接受一個引數。

s：一個數字，表示要應用於元素每個點的縱座標（垂直，y 座標）的縮放因子。

語法

transform: scaleY(s);

CSS scaleY() - 正值和負值

以下是 scaleY() 函式使用正值和負值作為引數的示例

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-image: url(images/logo.png);
      margin-bottom: 1em;
   }

   section {
      outline: 2px solid blue;
      width: 150px;
      height: max-content;
   }

   .scale-y-positive {
      background-image: url(images/logo.png);
      transform: scaleY(0.8);
   }

   .scale-y-negative {
      background-image: url(images/logo.png);
      transform: scaleY(-0.4);
   }

   .scale-y-one {
      background-image: url(images/logo.png);
      transform: scaleY(1);
   }

   .scale-y-int {
      background-image: url(images/logo.png);
      transform: scaleY(1.5);
   }
</style>
</head>
<body>
   <section>
      <p>No function</p>
      <div></div>
   </section>
   <section>
      <p>scaleY(-0.4)</p>
      <div class="scale-y-negative"></div>
   </section>
   <section>
      <p>scaleY(0.8)</p>
      <div class="scale-y-positive"></div>
   </section>
   <section>
      <p>scaleY(1)</p>
      <div class="scale-y-one"></div>
   </section>
   <section>
      <p>scaleY(1.5)</p>
      <div class="scale-y-int"></div>
   </section>
</body>
</html>

列印頁面