CSS - scaleZ()

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

该函数通过一个常数因子（非1）修改每个元素点的z坐标。当缩放因子为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>

打印页面