scaleX()
scaleX()
该scaleX()
CSS函数定义了沿x轴(水平)调整元素大小的变换。
它用一个常数因子修改每个单元点的纵坐标(除非比例系数是1,在这种情况下,该函数是恒等变换)。缩放不是各向同性的,元素的角度不守恒。scaleX(-1)定义了一个关于穿过原点(由transform-origin属性指定)的竖直轴对称的轴对称变换。
注意:
scaleX(sx)
相当于scale(sx, 1)
或scale3d(sx, 1, 1)
。
语法
scaleX(s)
可能值
s是一个代表要应用在元素的每个点的横坐标的缩放比例的<number>。
Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
---|---|---|---|
s0 01 | s00010001 | s00010001 | s000010000100001 |
| s 0 0 1 0 0 |
实例
HTML
<div>Normal</div>
<div class="scaled">Scaled</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scaleX(0.6
background-color: pink;
}
结果
另见
transform
- <transform-function>