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

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

皆様こんばんは。

元気ですか!

僕は元気ですよ。

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

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

では、早速

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

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

回転させるには

rotate()

を指定します。

こんな感じ。

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

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

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

他には、

rotateX()//縦回転。

rotateY()//横回転。

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

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

hoverした時に回転させる。

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

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

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

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

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

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

こちらをご覧ください。

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

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

まずボタンを押すと

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

rotateZ(0) → rotateZ(90deg)

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

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

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

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

rotateY(90deg) → rotateY(0)

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

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

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

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

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

コーダー

yu.kanazawa

シンガー、俳優とクリエイティブな活動をしながら、アルバイト、会社員、ニート、個人事業主経て株式会社awesomeに所属。関わる人に楽しさを提供する事を信条に掲げ、0ベースからビジネスを創れるように、奮闘中です。

他の投稿を見る →