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

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

この記事を読むのに必要な時間:およそ 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コードを書いて実行する

著者プロフィール

野中文雄(のなかふみお)

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入