CSSリファレンス

Tweet

transformのtranslate()では要素を移動させることが可能です。

引数が1つの場合はセレクターで指定した要素をX軸方向に移動させます。これはtranslateX()で指定した場合と同じ挙動です。

.target{
	transform:translate(10px);
}

引数が2つの場合はセレクターで指定した要素を最初の引数で指定した距離だけX軸方向に移動させ、次の引数で指定した距離だけY軸方向に移動させます。

.target{
	transform:translate(10px,20px);
}

Y軸方向のみ移動させたい場合は最初の引数に0を指定するか、translateY()を利用しましょう。

.target{
	transform:translate(0,20px);
}

translate()が利用できるtransformプロパティは一部のブラウザでは「-webkit-」や「-ms-」といったベンダープレフィックスを利用して実装されているので、ベンダープレフィックスを付けた記述も追加することでより多くのブラウザをサポートできるでしょう。

.target{
	-webkit-transform:translate(0,20px);
	-ms-transform:translate(0,20px);
	transform:translate(0,20px);
}

対応ブラウザ

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
Google ChoromeとFirefoxは執筆時点での最新バージョンでの実装状況です。

参考URL

15.1. 2D Transform Functions translate([, ]) - W3C

登録日 : 2013年08月31日 最終更新日 : 2013年8月31日

同じカテゴリー(Transform)のエントリー

• backface-visibility
• perspective-origin
• perspective
• transform-style
• transform-origin
• matrix3d()
• matrix()
• perspective()
• skewY()
• skewX()
• skew()
• rotate3d()
• rotateZ()
• rotateY()
• rotateX()
• rotate()
• scale3d()
• scaleZ()
• scaleY()
• scaleX()
• scale()
• translateZ()
• translate3d()
• translateY()
• translateX()
• translate()
• transform