分12今回のお題は,5つの画像で五角柱を組み立てて,水平に回してみよう(サンプル1⁠)⁠。五角柱にマウスポインタを重ねれば,回転は止まる。回し続けるために,アニメーションにはanimationプロパティを使った。いっても,設定そのものはさほどむずかしくない。考え方さえわかれば,3次元のアニメーションは「こけおどし」にはもってこいといえる。polygon」を採り入れた。コードはわかりやすいように大幅に書き替えてある。画像を回す前に,まず五角柱を組み立てなければならない。そのために使うのは,座標変換のtransformプロパティだ。関数rotateY()とtranslateZ()で,5つの画像を順に垂直軸で回しては移動する。わかりやすいように,四角柱で考え方を確かめておこう。四角柱は,4つの側面がそれぞれ隣の面と直角に接する(上面と底面はなしとする⁠)⁠。配置を確かめるためには,真上から見たxz平面で考えるとよい(図1⁠)⁠。z軸の下方向が,画面に向かって正面だ。ひとつめの面を,まずy軸で90度回す(rotateY()関数⁠)⁠。すると,面のxz軸も一緒に90度回転する。そこでつぎに,面のz軸方向にその幅の半分動かせばよい(translateZ()関数⁠)⁠。座標変換では,複数の変換を加えた場合,一般にその順序によって結果は変わるので注意してほしい。面をrotateY()で回してtranslateZ()で動かす五角柱もそれぞれの面をy軸で回して(rotateY()関数⁠)⁠,z軸の向きに位置を変える(translateZ()関数)ことは同じだ(図2⁠)⁠。このとき,z軸方向にどれだけ動かせばよいか。四角柱のように,面の幅の半分と,たやすくは計算できない。五角柱も面をrotateY()で回してtranslateZ()で動かすのは同じこの場合,三角関数のtanを使う。tanはつぎのように定められている(図3⁠)⁠。一般に,直角三角形の直角でない角(θ)と1辺がわかれば,他の辺は三角関数を用いた比例計算で導ける(斜辺が得られたときにはsinまたはcosを使う⁠)⁠。HTMLドキュメントの<body>要素の記述は以下のコード1のとおりで,5つの画像(img要素)の幅(widthプロパティ)は<img>要素に揃えて240ピクセルを与えたので,その半分は120ピクセルとなる。すると,各面をz軸方向に動かす長さtzは,つぎのように求められる。</div></div>もっとも,tan(36°)をどうやって計算するか,不安を感じた読者もいるかもしれないが難しくはない。Chromeなら[表示]/[開発/管理]/[JavaScriptコンソール]⁠)⁠。JavaScriptでtanの値はMath.tan()メソッドにより得られる。引数に渡す角度は度数でなくラジアンを単位とする。πの値はMath.PI定数で表される。コンソールにつぎのように入力したら,移動する長さは約165ピクセルだとわかった(図4⁠)⁠。