ローディング中

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

css_rotate

皆様こんばんは。

元気ですか!

僕は元気ですよ。

さて、本日は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アニメーションを追加して、

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

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

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.