今回のお題は,animation
プロパティを使った。といっても,
サンプル1 CSS3: Photos on a rotating polygon in 3D space
五角柱をつくる計算
今回の表現は,transform
プロパティだ。関数rotateY()
とtranslateZ()
で,
四角柱は,rotateY()
関数)。すると,translateZ()
関数)。なお,
五角柱もそれぞれの面をy軸で回してrotateY()
関数),translateZ()
関数)
この場合,
tanθ= 高さ / 底辺
さて,<body>
要素の記述は以下のコード1のとおりで,img
要素)width
プロパティ)<img>
要素に揃えて240ピクセルを与えたので,
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>
もっとも,Math.
メソッドにより得られる。ただし,Math.
定数で表される。コンソールにつぎのように入力したら,
120 / Math.tan(Math.PI / 5)