scale()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
CSS 函数 scale()
用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值。
尝试一下
该变换通过一个二维向量确定在一个方向缩放的多少。如果缩放向量的两个坐标是相等的,那么所讲是均等的,或者说是各向同的,同时元素的形状是被保持的。这种情况下进行的是位似变换。
当坐标值处于区间 [-1, 1]
之外时,该变换将在相应的坐标方向上放大该元素,当处在区间之中时,该变换将在相应的坐标方向上缩小该元素。当值为 1 时将不进行任何处理,当为负数时,将进行像素点反射之后再进行大小的修改。
备注: scale()
仅适用于在欧几里德平面(二维平面)上的变换。如果需要进行空间中的缩放,必须使用 scale3D()
。
语法
css
scale(sx)
或
css
scale(sx, sy)
值
示例
单一维度缩放
HTML
html
<p>foo</p>
<p class="transformed">bar</p>
CSS
css
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
/* 等同于变换:scaleX(2) scaleY(2);*/
transform: scale(2);
background-color: blue;
}
结果
在 X 和 Y 两个维度缩放并移动缩放中心
HTML
html
<p>foo</p>
<p class="transformed">bar</p>
CSS
css
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
/* 等同于 scaleX(2) scaleY(0.5) */
transform: scale(2, 0.5);
transform-origin: left;
background-color: blue;
}
结果
规范
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-scale |