scale3d()

该scale3d() CSS函数定义了在3D空间中调整元素大小的变换。由于缩放的量由矢量定义，因此可以以不同的缩放比调整不同的尺寸。

该缩放变换的特征在于三维矢量。其坐标定义在每个方向上完成多少缩放。如果所有三个坐标相等，则缩放是均匀的（各向同性的），并且元素的纵横比被保留（这是一个同态变换homothetic transformation）。

当坐标值在-1,1范围之外时，元素沿着该维度增长; 当在该范围内时，元素沿着该维度缩小。如果值是负的，那么结果就是在这个维度上的一个点反射。值1不起作用。

语法

该scale3d()函数是用三个值指定的，这三个值表示在每个方向上应用的缩放量。

scale3d(sx, sy, sz)

可能值

<number>sx代表缩放矢量的横坐标。<number>sy代表缩放向量的纵坐标。<number>sz表示缩放矢量的z分量。

Cartesian coordinates on ℝ2	Homogeneous coordinates on ℝℙ2	Cartesian coordinates on ℝ3	Homogeneous coordinates on ℝℙ3
This transform applies to the 3D space and cannot be represented on the plane.	sx000sy000sz	sx0000sy0000sz00001

实例

不改变原点

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px
  background-color: pink;
}

结果

将变换的原点作平移

HTML

<div>Normal</div>
<div class="scaled">Scaled</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: perspective(500px) scale3d(2, 0.7, 0.2) translateZ(100px
  transform-origin: left;
  background-color: pink;
}

结果

另见

transform

<transform-function>