cssで要素を回転。ハンバーガーメニューに使ってみた。

皆様こんばんは。

元気ですか！

僕は元気ですよ。

さて、本日はCSSを使って要素を回転させる方法を

レクチャーしたいと思います。

では、早速

cssで要素を回転させるにはtransformを使う。

transformに指定できる値は色々ありますが、

回転させるには

rotate()

を指定します。

こんな感じ。

.kaiten{
  transform: rotate(10deg);
}

回転にはこのdegという単位を指定してやりましょう。

rotate()は２Dでの角度指定です。

他には、

rotateX()//縦回転。

rotateY()//横回転。

rotateZ()//時計回りの回転。

という指定の仕方があります。

hoverした時に回転させる。

こちらをホバーしてみてください。

全て180度回転させています。

分かりやすくするためにゆっくり回転させていますが、

もう少し速くして、アイコンのなどの

ホバーアクションに使うと、アクセントになって良いですね。

ハンバーガーメニューに使ってみました。

こちらをご覧ください。

これはハンバーガーボタンをクリックした時に

クラスを変えているだけなのですが、

まずボタンを押すと

クルッと時計周りに回転します。

rotateZ(0) → rotateZ(90deg)

そしてメニュー項目はクルッとY軸を中心に回転します。

これは元々90度回転させて、

見えなくしていた要素を、

回転角度0度にして表示させています。

rotateY(90deg) → rotateY(0)

これにJSのクリックイベントと

CSSアニメーションを追加して、

ハンバーガーメニュを作成できますね。

是非、活用してみてください。