CSS参考手册
变换 | Transforms
scale()
该scale()
CSS函数定义了在2D平面上调整元素大小的变换。由于缩放的量由矢量定义,因此可以以不同的缩放比调整水平和垂直尺寸。
该缩放变换的特征在于二维矢量。其坐标表示在每个方向上完成多少缩放。如果两个坐标相等,缩放比例是均匀的(各向同性的)并且元素的纵横比被保留(这是一个同态变换homothetic transformation)。
当坐标值在-1,1范围之外时,元素沿着该维度增长; 当处在该范围内时,它随着该维度缩小。如果值是负的,那么结果就是在这个维度上的一个点反射。值1不起作用。
注意:该scale()
功能只能在2D中缩放。要在3D中缩放,请改用scale3d()
。
语法
该scale()
函数用一个或两个值来指定,这些值表示要在每个方向上应用的缩放量。
scale(sx)
scale(sx, sy)
可能值
sx
——一个表示缩放矢量的横坐标的<number>
。
sy
——一个表示缩放矢量的纵坐标的<number>
。如果未定义,则其默认值为sx
,导致保持元素纵横比的统一缩放比例。
Cartesian coordinates on ℝ2 |
Homogeneous coordinates on ℝℙ2 |
Cartesian coordinates on ℝ3 |
Homogeneous coordinates on ℝℙ3 |
---|---|---|---|
sx0 0sy |
sx000sy0001 |
sx000sy0001 |
sx0000sy0000100001 |
| sx 0 0 sy 0 0 |
实例
X维和Y维一起缩放
HTML
<div>Normal</div>
<div class="scaled">Scaled</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
background-color: pink;
}
结果
分别标定X维和Y维,并平移原点
HTML
<div>Normal</div>
<div class="scaled">Scaled</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scale(2, 0.5); /* Equal to scaleX(2) scaleY(0.5) */
transform-origin: left;
background-color: pink;
}
结果
另见
transform
<transform-function>
scale3d()
变换 | Transforms相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。