CSS3なら簡単！アニメーションするリングメニューを作る

カテゴリ：CSS3関連 2011年7月19日 07:40

jsdo.itで公開したら意外と好評だったので、解説などを書いてみたいと思います。

ゲームなどにありそうなリングメニューを、CSSだけを使って実装した例です。下に実際の動くサンプルもあるので、ぜひ触って見てください。

ちなみに右の画像は、中央の「main」にマウスオーバーした際にアニメーションでメニューが出てくる瞬間の画像です。

デモ

まずは下のサンプルをご覧ください。ちなみにアニメーションに対応しているブラウザのみ、アニメーションが実行されます。具体的には、GoogleChrome、Safari、Firefox、Operaです。

リングメニューをCSSで実装してみる - jsdo.it - share JavaScript, HTML5 and CSS

テクニックの肝

今回のテクニックの肝は、transform-originです。このプロパティは、transform系の値を変更する際、どこを基点にするかというものになります。

このtransform-origin、デフォルト値は50% 50%となっています。つまりその要素の縦横中央、ということですね。もしこれを0 0とすれば左上が基点となり、100% 100%とすれば右下が基点となるわけです。そしてこの数値には、pxも指定することができるので、細かく位置を調整することも可能となります。

▼EntryMore▼

CSS3でのアニメーションの解説

上で、transform-originにはpxでの指定も可能だと書きました。今回のテクニックは、このpx指定を使って位置を厳密に決めています。

下の画像が、実際に指定している値とそれぞれの指定の意味を解説した図になります。
top, right, bottom, leftそれぞれの左上（transform-origin: 0 0）からどれくらいの位置を基点にしたらいいかを記載しています。図を見てもらうと、なんとなくどれくらいの値を設定すればいいがイメージできるかと思います。

さて、ここまで数値と概念が分かれば、あとはそれぞれCSSで値を設定していくだけです。

HTMLソース

CSSソース

/* 上下左右のメニューへマウスを移動する際に.ringMenuからmouseoutが発生しないようコンテナのサイズを少し大きくする */
.ringMenu:hover {
  padding: 30px 30px;
  margin: -30px -30px;
}
.ringMenu ul {
  position: relative;
}

/* transition時のアニメーションの具合を定義 */
.ringMenu ul li {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.ringMenu ul li a {
  display: block;
  width: 100px;
  height: 100px;
  background: rgba(50,50,50,0.7);
  text-align: center;
  line-height: 100px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
}

/* main以外は通常時はscale(0)で実質非表示 */
.ringMenu ul li:not(.main) {
  -webkit-transform: rotate(-180deg) scale(0);
  -moz-transform: rotate(-180deg) scale(0);
  -o-transform: rotate(-180deg) scale(0);
  transform: rotate(-180deg) scale(0);
  opacity: 0;
}

/* マウスオーバー時に、非表示にしていた各要素をscale(1)にして表示 */
.ringMenu:hover ul li {
  -webkit-transform: rotate(0) scale(1);
  -moz-transform: rotate(0) scale(1);
  -o-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
  opacity: 1;
}

/* 以下、top, right, bottom, leftのそれぞれの位置を調整 */
.ringMenu ul li.top {
  -webkit-transform-origin: 50% 152px;
  -moz-transform-origin: 50% 152px;
  -o-transform-origin: 50% 152px;
  transform-origin: 50% 152px;
  position: absolute;
  top: -102px;
  left: 0;
}
.ringMenu ul li.bottom {
  -webkit-transform-origin: 50% -52px;
  -moz-transform-origin: 50% -52px;
  -o-transform-origin: 50% -52px;
  transform-origin: 50% -52px;
  position: absolute;
  bottom: -102px;
  left: 0;
}
.ringMenu ul li.right {
  -webkit-transform-origin: -52px 50%;
  -moz-transform-origin: -52px 50%;
  -o-transform-origin: -52px 50%;
  transform-origin: -52px 50%;
  position: absolute;
  top: 0px;
  right: -102px;
}
.ringMenu ul li.left {
  -webkit-transform-origin: 152px 50%;
  -moz-transform-origin: 152px 50%;
  -o-transform-origin: 152px 50%;
  transform-origin: 152px 50%;
  position: absolute;
  top: 0;
  left: -102px;
}

上記の指定を記述すれば、サンプルのアニメーションを持ったリングメニューの完成です。

いくつかポイントを解説

まず、.ringMenu:hoverで若干、コンテナのサイズを拡張します。これは、マウスオーバーでメニューが表示された際、それぞれのメニューへマウスを移動しようとすると、初期のサイズだと上下左右のメニューの中間にマウスを持って行くとメニューが閉じてしまいます。（実際に拡張している部分を消して試してみると分かると思います）
そのため、スムーズにメニューを選べるようにするために拡張しているわけです。

次にアニメーションをさせる部分ですが、mainのメニュー以外をtransform: scale(0)を使って実質非表示にしておきます。加えて、rotate(-180deg)を同時に指定しておきます。

そして、.ringMenu:hoverの際に、それぞれのscaleを1に、rotateを0に戻します。すると、transform-originで指定した基点を中心にして、回転しながら元のサイズに戻ります。さらにtransitionを指定しているのでその遷移がアニメーションを伴って表示され、結果回転してメニューが出現する「リングメニュー」になる、というわけです。

この記事のカテゴリー一覧を見る⇒CSS3関連