【CSS】deg角度確認一覧【transform:rotate】

2020年03月04日

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

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

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

transform:rotate deg角度確認一覧

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

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

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

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

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

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

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

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。