CSS - scale3d()

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);

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS scale3d() - 带或不带 transform-origin 值

以下是带有和不带 transform-origin 值的 scale3d() 函数示例

Open Compiler

<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>

打印页面