scaleX()
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.
Please take two minutes to fill out our short survey.
scaleX()
CSS 函数将每个元素点的横坐标修改为一个常数因子,除了该比例因子为 1,在这种情况下,函数是身份变换。缩放不是各向同性的,并且元素的角度不保守。
scaleX(sx)
是 scale(sx, 1)
或 scale3d(sx, 1, 1)
的一个速记/缩写。
备注: scaleX(-1)
定义一个 轴向对称性,它具有一个垂直轴通过原点(由 transform-origin
属性规定)。
Syntax
css
scaleX(s)
Values
Examples
Without changing the origin
HTML
html
<p>foo</p>
<p class="transformed">bar</p>
CSS
css
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
transform: scaleX(2);
background-color: blue;
}
Result
Translating the origin of the transformation
HTML
html
<p>foo</p>
<p class="transformed">bar</p>
CSS
css
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
transform: scaleX(2);
transform-origin: left;
background-color: blue;
}
Result
规范
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-scalex |