MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

translateX()

translateX() CSS 関数は、要素を平面上で水平方向に移動します。この変換は、水平方向の移動量を定義する <length> によって指定されます。

translateX(tx) は、translate(tx, 0) の短縮表記です。

構文

translateX(t)

t
変換ベクトルの横座標を表す <length> の値。
デカルト座標 ℝ2 同次座標 ℝℙ2 デカルト座標 ℝ3 同次座標 ℝℙ3

変換は、ℝ2 内の線形変換ではなく、デカルト座標系では行列を使用して表現できません。

10t010001 10t010001 100t010000100001
[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;
}

結果

ドキュメントのタグと貢献者

 このページの貢献者: dskmori
 最終更新者: dskmori,