CSS 数据类型

CSS中的scale3d()函数用于对三维平面上的元素应用缩放变换（调整大小）。该函数可以在不同方向上以不同的比例调整元素的大小，因为缩放量由向量 [sx, sy, sz] 定义。结果是 <transform-function> 数据类型。

  • 缩放变换由三维向量确定，其坐标指定在每个方向上进行多少缩放或调整大小。

  • 缩放将是均匀的（各向同性），并且纵横比当所有三个坐标都相等时，将保留元素的比率。这种形式的缩放变换称为位似变换。

  • 如果坐标值超出 [-1, 1] 范围，则元素将以以下维度增长:

  • 如果坐标值在[-1, 1]范围内，则元素将按照指定的尺寸缩小。

  • 如果坐标值为负，则会导致点反射在指定的维度中。

  • 当值为1时，对元素的大小没有影响。

属性值

函数scale3d()接受三个值作为参数，表示要在每个方向应用的缩放量。

  • sx:是一个<number>值，表示缩放向量的横坐标（水平，x坐标） .

  • sy:它是一个 <number> 值，表示纵坐标（垂直，y-缩放向量的坐标）。

  • sz:它是一个 <number> 值，表示缩放向量的 z 分量。

语法

transform: scale3d(sx, sy, sz);

CSS scale3d(): 有或没有transform-origin值

以下是带有和不带有给定变换原点值的scale3d()函数的示例：

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

   .scaled-without-origin {
      background-color: pink;
      transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px);
   }

   .scaled-with-origin {
      background-color: lightgreen;
      transform: perspective(500px) scale3d(1.5, 0.8, 0.2) translate(100px);
      transform-origin: right;
   }
</style>
</head>
<body>
   <section>
      <div>No function</div>
   </section>
   
   <section>
      <div class="scaled-without-origin">w/o transform-origin</div>
   </section>

   <section>
      <div class="scaled-with-origin">with transform-origin</div>
   </section>
</body>
</html>