We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

ここへジャンプ:

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,