rotate3d()

このエントリーをはてなブックマークに追加

transformプロパティで指定できるのrotate3d()は要素を任意の軸を中心に回転させることができます。

最初に3つの引数でx,y,zの距離を指定し任意の軸の方向を指定し、セレクターで指定した要素を4つめの引数で指定した角度で回転させます。角度の単位はdegで回転する角度を指定できます。

.target{
	transform:rotate3d(3,2,3,180deg);
}

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

.target{
	-webkit-transform:rotate3d(3,2,3,180deg);
	-ms-transform:rotate3d(3,2,3,180deg);
	transform:rotate3d(3,2,3,180deg);
}

sample

対応ブラウザ

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

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

参考URL

15. The Transform Functions - rotate3d - W3C

登録日 : 2013年10月02日 最終更新日 : 2013年10月2日

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

検索

スポンサードリンク

バージョン

リファレンス