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

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

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

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

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/189