CSSの
scaleX()
関数は、要素をX軸に沿って(水平に)拡縮する変形を定義します。結果は
<transform-function>
データ型になります。係数が 1 である場合を除いて、各要素点の横座標を一定の係数で修正し、この場合、関数は恒等変換です。拡大縮小は等方性ではなく、要素の角度は保存されません。 scaleX(-1)
は軸の線対称を定義し、垂直軸は原点を通過します (transform-origin
プロパティで指定)。
Syntax
scaleX(s)
Values
s
- Is a
<number>
representing the scaling factor to apply on the abscissa of each point of the element.
Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
---|---|---|---|
[s 0 0 1 0 0] |
Examples
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;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Transforms Level 1 scaleX() の定義 |
草案 | Initial definition |
Browser compatibility
BCD tables only load in the browser
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.