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>
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
