CSS 数据类型

CSS 中的scaleY() 函数用于沿垂直（Y 轴）维度对元素应用缩放变换（调整大小）。结果是 <transform-function> 数据类型。

该函数修改元素点乘以常数因子。当比例因子为1时，函数进行恒等变换。 scaleY(-1) 指定轴对称，其中水平轴穿过变换原点。

可能的值

函数scaleY() 接受单个参数。

  • s:一个数字，表示要应用于元素每个点的纵坐标（垂直、y 坐标）的缩放因子。

语法

transform: scaleY(s);

    CSS scaleY(): 正值和负值

    以下是使用正值和负值作为参数的scaleY()函数示例:

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

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

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

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

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

   .scale-y-int {
      background-image: url(/css/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> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59