今回のお題も、前回と同じく項目を並べたメニューだ(サンプル1)。ただし、今度は3次元のアニメーションにした。マウスポインタをメニュー項目に重ねると、立方体のように垂直に回る。CSS3を使えば、このような3次元の表現もできてしまう。CodePenに公開された「CSS Cube Flip」を参考に、HTMLとCSSのコードの構成を改め、簡潔にした。
メニューのもとになる静的スタイル
まず、<body>
要素に書くコードの構成だ。メニューは、つぎのように<ul>
要素でリストとして組み立てる。メニュー項目を<li>
要素(class
属性"component")とし、その中の<a>
要素(class
属性"face")にテキストを加えた。そして、メニューの<ul>
要素全体を、<div>
要素(class
属性"container")で包んでいる。
この<body>
要素の記述に対して、つぎのような<style>
要素を加える。今のところ、メニューは動きのない背景が四角い文字で(図1)、マウスインタラクションも加えられていない。なお、CSSにベンダープレフィックスを付けなくて済むように、<script>
要素で-prefix-freeを読み込んでいる(第1回の「ベンダープレフィックスと-prefix-free」の項参照)。
要素にポインタを重ねたら水平軸で回す
マウスポインタを重ねたら、要素が垂直に回るようにしよう。垂直の向きに回すということは、x軸を中心にするということだ。その場合、transform
プロパティで用いるのがrotateX()
関数である。引数には度数を表す単位のdeg
がつく。今回は、立方体のように回したい。つまり、前面を回し終えたら、上面になるということだ。そのためには、回し始めの軸は上辺とし、回しながらその垂直位置を真ん中にもってくればよい。まず、回転の原点はtransform-origin
プロパティで動かせる。水平方向と垂直方向のふたつの位置を与える。デフォルト値はともに中央のcenter
だ。この垂直位置を上方のtop
にずらす。
つぎに、回しながら要素を上に動かせば、回転軸は相対的に下がることになる。したがって、つぎのようにtransform-origin
プロパティで回転軸を上辺に定めたうえで、transform
プロパティでは高さの半分translateY()
関数で上に動かした。
さらに、3次元の表現を使うためには、あと2つ、つぎのようなプロパティの定めがいる。ひとつは、transform-style
プロパティだ。デフォルト値は2次元のflat
なので、3次元にする値preserve-3d
を与える。もうひとつは、perspective
プロパティで遠近感を加える(図2右)。単位はpx
で、数字が大きいほど遠近の差が小さくなる。デフォルト値は差のないnone
のため、そのままでは回っているというより伸び縮みしているように見えてしまう(図2左)。
ここまでのCSSの定めを以下のコード1にまとめた。これで、立方体にした場合の前面が、マウスポインタを重ねたときに水平軸で上面に回る(図1)。
それぞれの項目に底面を加える
それでは、底面を加えよう。もちろん、HTMLコードに要素を書き足してもよい。だが今回は、::after
擬似要素を使ってCSSで、つぎのようにつくってみよう。content
プロパティには表示する文字を与えることにする。それぞれの親要素(class
属性"face")がもつ文字を得るため、以下のHTMLコードのとおり、カスタムデータ属性に文字を定めた。その場合、属性の名前はdata-
で始めるのが決まりだ。値はattr()
関数で取り出せる。なお、底面なので初めにx軸で-90度回しておく。
もうひとつ、マウスポインタを重ねて底面が正面に回るとき、つぎのようにもとの色より少し明るめのカラーに変わるようにした。これで、項目にポインタを重ねると、立方体が垂直に回るアニメーションができあがる(図4)。書き上がったCSSの定めは、以下のコード2にまとめた。