translateX() CSS 関数は、要素を平面上で水平方向に移動します。この変換は、水平方向の移動量を定義する <length> によって指定されます。
translateX(tx) は、translate(tx, 0) の短縮表記です。
構文
translateX(t)
値
- t
- 変換ベクトルの横座標を表す
<length>の値。
| デカルト座標 ℝ2 | 同次座標 ℝℙ2 | デカルト座標 ℝ3 | 同次座標 ℝℙ3 |
|---|---|---|---|
|
変換は、ℝ2 内の線形変換ではなく、デカルト座標系では行列を使用して表現できません。 |
|||
[1 0 0 1 t 0] |
例
HTML
<p>foo</p> <p class="transformed">bar</p> <p>foo</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformed {
transform: translateX(10px);
background-color: blue;
}