CSS 数据类型

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

该函数将每个元素点的 z 坐标修改为常数因子，不是 1。当比例因子为 1 时，函数进行恒等变换。 scaleZ(-1) 指定轴对称，其中 z 轴穿过变换原点。

属性值

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

  • s:一个数字，表示要应用于元素每个点的 z 坐标的缩放因子。

语法

transform: scaleZ(s);

CSS scaleZ(): 正值和负值

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

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

   .scale-z-positive {
      background-color: pink;
      transform: perspective(800px) scaleZ(2) translateZ(-100px);
   }

   .scale-z-negative {
      background-color: lightgreen;
      transform: perspective(800px) scaleZ(-0.5) translateZ(-100px);
   }
</style>
</head>
<body>
   <section>
      <p>No function</p>
      <div></div>
   </section>
   
   <section>
      <p>+ve scaleZ()+translateZ()</p>
      <div class="scale-z-positive"></div>
   </section>
   
   <section>
      <p>-ve scaleZ()+translateZ()</p>
      <div class="scale-z-negative"></div>
   </section>
</body>
</html>