[CSS]水平ナビゲーションの各アイテムをホバー時に、くるくるっと回転させるテクニック

サイト構築 -CSS

Post on:2015年1月8日

sponsorsr

ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させるスタイルシートのテクニックを紹介します。

HTMLは非常にシンプルなので、簡単に利用できると思います。

実際の動きは、下記ページでお楽しみください。

Rotating menu

実装

HTML

HTMLは非常にシンプルです。

<nav>
  <a href="#">Home</a>
  <a href="#">About us</a>
  <a href="#">Serviсes</a>
  <a href="#">Contacts</a>
</nav>

CSS

ナビゲーションの各アイテムはflexboxで配置し、くるくるっとしたアニメーションはtransformで設定します。

body {
  font-family: "Open Sans Condensed" sans-serif;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100vh;
  background: #2c3e50;
}
nav {
  -webkit-flex: 1 1 1;
      -ms-flex: 1 1 1;
          flex: 1 1 1;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
}
a {
  font-size: 0.7rem;
  text-decoration: none;
  padding: 1rem;
  background: #34495e;
  color: rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.133rem;
}
a:hover {
  -webkit-animation: rotateLink 0.5s cubic-bezier(0.53, 0.23, 0.61, 1.25) forwards;
          animation: rotateLink 0.5s cubic-bezier(0.53, 0.23, 0.61, 1.25) forwards;
  background: #233140;
  color: #fff;
}
a:active {
  background: #1a242f;
}
a:first-child {
  border-radius: 1rem 0 0 1rem;
}
a:last-child {
  border-radius: 0 1rem 1rem 0;
}
@-webkit-keyframes rotateLink {
  from {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  to {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}
@keyframes rotateLink {
  from {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  to {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}

transformの対応ブラウザは、下記の通り。