2Dトランスフォームの横(XY軸)回転

2Dトランスフォームの横(XY軸)回転について

要素をXY軸方法に回転させるには、transformプロパティのrotate関数を使用します。
引数には回転させる角度を指定、単位はdegを使用します。

回転する方向はX軸の右側を0度とし、時計回りに回転します。
負の値を指定することで反時計回りに回転します。

なお、transform-originプロパティによって回転の基点の位置(回転軸)が異なりますので、ご注意ください。
transform-originプロパティの詳細は 要素の基点(原点) を参照してください。

構文

							transform:rotate(角度);
						

サンプル

30deg

-30deg

CSS

シミュレーション

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

transform:rotate(deg );

IE8以下の対応

rotate関数はIE8以下に対応していません。
そこでfilterプロパティを使用することで再現できます。
ただし、指定できる角度は90度ずつしか指定できません。

構文

							filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=角度);
						
  • ※ rotationの値は1から4の値が指定でき、0が0度、1が90度、3が180度、4が270度となります。
  • ※ W3Cには準拠しません。

CSS

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