今回は【CSSデザインまとめ】transform:rotateX,rotateY,rotateZ,rotate3dでナビゲーションバーエフェクト3選をご紹介。シンプルかつわかりやすいデザイン。それぞれ違うエフェクト。実務で使える。コピペOK
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
この記事の目次
【CSSデザインまとめ】transform:rotate(X,Y,Z,3d)でナビゲーションバーエフェクト3選
1. transform:rotateXとscaleで縦回転するナビゲーションバーデザイン
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- ul, liでナビゲーションの骨組みを作成
- flexboxでど真ん中に配置
- .navigation:hover .button:hover > pに transform: rotateX(360deg) scale(1.5)を指定することによりhoverしたボタンのみ縦回転+サイズが拡大する
- transitionで要素をマウスオーバー(hover)した際のアニメーションを指定しシンプルなナビゲーションバーデザインを実現
2. transform:rotateYとscaleで横回転するナビゲーションバーデザイン
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- ul, liでナビゲーションの骨組みを作成
- flexboxでど真ん中に配置
- .navigation:hover .button:hover > pに transform: rotateY(360deg) scale(1.5)を指定することによりhoverしたボタンのみ横回転+サイズが拡大する
- transitionで要素をマウスオーバー(hover)した際のアニメーションを指定しシンプルなナビゲーションバーデザインを実現
3. transform:rotateZとscaleでくるっと回転するナビゲーションバーデザイン
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- ul, liでナビゲーションの骨組みを作成
- flexboxでど真ん中に配置
- .navigation:hover .button:hover > pに transform: rotateZ(360deg) scale(1.5)を指定することによりhoverしたボタンのみくるっと回転+サイズが拡大する
- transitionで要素をマウスオーバー(hover)した際のアニメーションを指定しシンプルなナビゲーションバーデザインを実現
4. transform:rotate3dとscaleで立体感のあるナビゲーションバーデザイン
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- ul, liでナビゲーションの骨組みを作成
- flexboxでど真ん中に配置
- .navigation:hover .button:hover > pに transform:rotate3d(.2,0,.7,-30deg) scale(1.5)を指定することによりhoverしたボタンのみ立体感+サイズが拡大する
- transitionで要素をマウスオーバー(hover)した際のアニメーションを指定しシンプルなナビゲーションバーデザインを実現
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
ふたご
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
ふたご
完全無料で一人前のエンジニアになれるプログラミングスクールあります