第4回 3次元で垂直に回る立方体のメニュー | gihyo.jp今回のお題も、前回と同じく項目を並べたメニューだ（サンプル1）。ただし、今度は3次元のアニメーションにした。マウスポインタをメニュー項目に重ねると、立方体のように垂直に回る。CSS3を使えば、このような3次元の表現もできてしまう。CodePenに公開された「CSS Cube Flip」を参考に、HTMLとCSSのコードの構成を改め、簡潔にした。 サンプル1 CSS3: Cube Flip メニューのもとになる静的スタイル まず、<body>要素に書くコードの構成だ。メニューは、つぎのように<ul>要素でリストとして組み立てる。メニュー項目を<li>要素（class属性"component"）とし、その中の<a>要素（class属性"face"）にテキストを加えた。そして、メニューの<ul>要素全体を、<div>要素（class属性"container"）で包んでいる。 <div cla
