マンガでわかるホームページ作成

transform:rotate deg角度確認一覧

CSSではtransform: rotateを使うことで回転させ、斜めを表現することができます。

しかし45degと指定したらどうなるのか?

一覧を作ったので参考にしてください。

transform:rotate deg角度確認一覧

縦長の棒の下に軸があります。
時計をイメージしてください。

マウスを乗せたときが0度です。マウスを離すとX度回転します。


45度  
-45度

90度  
-90度

135度  
-135度

180度  
-180度

225度  
-225度

270度  
-270度

315度  
-315度

360度  
-360度

整数は時計回りです。マイナスは反時計回りです。

数学の分度器は反時計回りなのでtransform:rotateではマイナス値をつけることになります。

まとめ

transform:rotate(Xdeg)の数値について
整数なら時計回りです。
マイナスなら反時計回りです。

以上、transform:rotate deg角度確認一覧でした。

関連記事