移動量を指定する(2D)

書式

transform : translate(横の移動量)
transform : translate(横の移動量, 縦の移動量)
transform : translateX(横の移動量)
transform : translateY(縦の移動量)

説明

移動量を指定するにはtransformプロパティにtranslate()を指定します。パラメータが1つの場合は横だけが移動します。2つパラメータを指定した場合は、最初のパラメータが横方向の移動量、2番目のパラメータが縦方向の移動量になります。
また、translateX()を指定すると横方向だけの移動量を、translateY()を指定すると縦方向だけの移動量を指定することができます。
ブラウザによってはベンダープレフィックスを指定しないと動作しません。

サンプル サンプルを実行 サンプルをダウンロード

#content {
border:1px solid red;
transform : translate(50px, 80px);
-webkit-transform : translate(50px, 80px);
-moz-transform : translate(50px, 80px);
-o-transform : translate(50px, 80px);
-ms-transform : translate(50px, 80px);
}
目次に戻る