CSS 数据类型

CSS 中的scaleX() 函数用于沿水平（X 轴）维度对元素应用缩放变换。结果是 <transform-function> 数据类型。

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

属性值

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

  • s:一个数字，表示要应用于元素每个点的横坐标（水平、x 坐标）的缩放因子。

语法

transform: scaleX(s);

CSS scaleX(): 正值和负值

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

<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-x-positive {
      background-image: url(/css/images/logo.png);
      transform: scaleX(0.8);
   }

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

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

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