CSS3アニメーションでつくるインターフェイス表現

第10回　画像を3次元で水平に回すアニメーション

CSS, アニメーション, 三次元

この記事を読むのに必要な時間：およそ 4 分

今回のお題は，5つの画像で五角柱を組み立てて，水平に回してみよう（サンプル1）⁠。五角柱にマウスポインタを重ねれば，回転は止まる。ずっと回し続けるために，アニメーションにはanimationプロパティを使った。といっても，設定そのものはさほどむずかしくない。考え方さえわかれば，3次元のアニメーションは「こけおどし」にはもってこいといえる。

サンプル1　CSS3: Photos on a rotating polygon in 3D space

五角柱をつくる計算

今回の表現は，「⁠Photos on a rotating polygon」を採り入れた。もちろん，コードはわかりやすいように大幅に書き替えてある。画像を回す前に，まず五角柱を組み立てなければならない。そのために使うのは，座標変換のtransformプロパティだ。関数rotateY()とtranslateZ()で，5つの画像を順に垂直軸で回しては移動する。まずは，わかりやすいように，四角柱で考え方を確かめておこう。

四角柱は，4つの側面がそれぞれ隣の面と直角に接する（上面と底面はなしとする）⁠。配置を確かめるためには，真上から見たxz平面で考えるとよい（図1）⁠。z軸の下方向が，画面に向かって正面だ。ひとつめの面を，まずy軸で90度回す（rotateY()関数）⁠。すると，面のxz軸も一緒に90度回転する。そこでつぎに，面のz軸方向にその幅の半分動かせばよい（translateZ()関数）⁠。なお，座標変換では，複数の変換を加えた場合，一般にその順序によって結果は変わるので注意してほしい。

図1　面をrotateY()で回してtranslateZ()で動かす

図1　面をrotateY()で回してtranslateZ()で動かす

五角柱もそれぞれの面をy軸で回して（rotateY()関数）⁠，z軸の向きに位置を変える（translateZ()関数）ことは同じだ（図2）⁠。ただし，回転角は72度（= 360 / 5）ずつになる。このとき，z軸方向にどれだけ動かせばよいか。四角柱のように，面の幅の半分と，たやすくは計算できない。

図2　五角柱も面をrotateY()で回してtranslateZ()で動かすのは同じ

図2　五角柱も面をrotateY()で回してtranslateZ()で動かすのは同じ

この場合，三角関数のtanを使う。tanはつぎのように定められている（図3）⁠。一般に，直角三角形の直角でない角（θ）と1辺がわかれば，他の辺は三角関数を用いた比例計算で導ける（斜辺が得られたときにはsinまたはcosを使う）⁠。

tanθ= 高さ / 底辺

図3　tanは直角三角形の高さ / 底辺

図3　tanは直角三角形の高さ / 底辺

さて，五角柱の場合は，角度θは36度（= 72 / 2）だ。HTMLドキュメントの<body>要素の記述は以下のコード1のとおりで，5つの画像（img要素）の幅（widthプロパティ）は<img>要素に揃えて240ピクセルを与えたので，その半分は120ピクセルとなる。すると，各面をz軸方向に動かす長さtzは，つぎのように求められる。

tanθ = (width / 2) / tz
tz = (width / 2) / tanθ
= 120 / tan(36°)

コード1　5つの面の画像を定めた<body>要素の記述

<div class="container">
    <div class="spinner">
        <img class="face face-1" src="images/pen01.png" width="240" height="160" alt="面1">
        <img class="face face-2" src="images/pen02.png" width="240" height="160" alt="面2">
        <img class="face face-3" src="images/pen03.png" width="240" height="160" alt="面3">
        <img class="face face-4" src="images/pen04.png" width="240" height="160" alt="面4">
        <img class="face face-5" src="images/pen05.png" width="240" height="160" alt="面5">
    </div>
</div>

もっとも，tan(36°)をどうやって計算するか，不安を感じた読者もいるかもしれないが難しくはない。ブラウザのコンソールを使って，JavaScriptで求めればよい（Google Chromeなら[表示]/[開発/管理]/[JavaScriptコンソール]）⁠。JavaScriptでtanの値はMath.tan()メソッドにより得られる。ただし，引数に渡す角度は度数でなくラジアンを単位とする。180度がπラジアンなので，36度はπ / 5ラジアンだ。πの値はMath.PI定数で表される。コンソールにつぎのように入力したら，移動する長さは約165ピクセルだとわかった（図4）⁠。

120 / Math.tan(Math.PI / 5)

図4　コンソールにJavaScriptコードを書いて実行する

図4　コンソールにJavaScriptコードを書いて実行する

CSS, アニメーション, 三次元

著者プロフィール

野中文雄（のなかふみお）

ソフトウェアトレーナー，テクニカルライター，オーサリングエンジニア。上智大学法学部卒，慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で，総務・人事，企画，外資系企業担当営業などに携わる。その後，マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング，コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URL：http://www.FumioNonaka.com/

著書