translate3d()

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

第１引数にX軸方向の移動距離、第2引数にY軸方向の移動距離、そして第３引数にZ軸方向の移動距離が指定できます。

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

X軸のみに移動させたい場合はtranslateX()を、Y軸のみに移動させたい場合はtranslateY()を、Z軸のみに移動させいたい場合はtranslateZ()を、X軸・Y軸のみに移動させたい場合はtranslate()を利用するとよいでしょう。

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

.target{
	-webkit-transform:translate3d(10px,20px,20px);
	-ms-transform:translate3d(10px,20px,20px);
	transform:translate3d(10px,20px,20px);
}

IE	Chrome 29	Safari	Firefox 23	iOS	Android
△ 9 ◯ 10〜	△	△ 5.1〜	◯	△ 3.2〜	△ 2.1〜

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

登録日 : 2013年09月01日最終更新日 : 2013年9月1日

CSSリファレンス