皆様こんばんは。
元気ですか！
僕は元気ですよ。
さて、本日は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アニメーションを追加して、
ハンバーガーメニュを作成できますね。
是非、活用してみてください。
