2Dトランスフォームの位置

2Dトランスフォームの位置について

要素をX軸またはY軸方法に移動させるには、transformプロパティのtranslate関数を使用します。
第一引数にX軸、第二引数にY軸の移動距離を指定をします。

構文

							transform:translate(X軸の位置);
							または
							transform:translate(X軸の位置, Y軸の位置);
						

また、X軸とY軸を個別に指定する場合は、X軸はtranslateX関数、Y軸はtranslateY関数を使用します。

							transform:translateX(X軸の位置);
							transform:translateY(Y軸の位置);
						

サンプル(transform:translate)

sample

CSS

サンプル(transform:translateX)

sample

CSS

サンプル(transform:translateY)

sample

CSS

シミュレーション

translate関数の値がどう反映されるかをシミュレートします。

transform:translate(,);

CSS3逆引きリファレンス一覧へ戻る