分12今回のお題は,3つの立方体のマウスインタラクションだ。マウスポインタを重ねた立方体の色が変わり,手前にスライドする(サンプル1⁠)⁠。実のところ,3次元の操作は加えていない。2次元の変換で立体風に見せているだけだ。CSS」のデザインと表現をもとに,HTMLとCSSの組み立てはわかりやすく改めた。Cubesインタラクションを加える前の立方体の表現まずは,インタラクションを加える前の静的な組み立てだ。<body>要素にはつぎのように3つの立方体の<div>要素(class属性"cube")を加える。立方体は3つとも同じように上(class属性"face-top")と左右(class属性"face-left"と"face-right")の3面をもつ。上面(class属性"face-top")だけ<div>要素を入れ子にしている。左右の面は傾斜の変換だけ加えれば済むのに対し,上面はさらに回転しなければならないからだ。</div></div>transformプロパティによる変換を加える前,3つの立方体の面の要素はつぎの図1のように位置や大きさ,色などが決めてある(後掲コード1参照⁠)⁠。立方体それぞれの3つの面は,つぎのようにtransformプロパティで変換する。基本は傾斜のskewY()関数だ。上面はscaleY()関数により縦横比を整えたうえで,前述のとおりrotate()関数で親要素(class属性"face-top")を回転した。これで,2次元の変換により,3つの面が立方体として表現できる(図2⁠)⁠。回転や傾斜が組み合わさる上面のような場合は,こうして要素を入れ子にすると,分けて調整がしやすい。3面の要素を変換して組み上がった3つの立方体インタラクションを加える前の<body>要素とCSSの定めは,つぎのコード1にまとめた。実際につくってみると,細かく位置や大きさを合わせるのに少しばかり手間がかかる。面は左から,立方体は右奥から決めていった。コードそのものはとくにむずかしいところはないだろう。いつものように-prefix-freeをCDNから読み込んである(第16回の「水平に並べた要素に静的なスタイルを割り当てる」参照)⁠。