CSSだけで作る３次元アニメーション
酷暑の夏が終わり、曼珠沙華の花が、見ごろを迎えています。曼珠沙華の花は一日の寒暖さが大きいければ大きい程、美しくなるそうです。
このブログで紹介するのは、正六面体(regular hexahedron)の表面に画像（写真）を貼り付け、その正六面体を回転させるアニメーションです。javascriptを使用しないで、CSSだけで作成することができました。
動機付けは、CSSの transform プロパティについて調べているときでした。トランスフォーム関数とは、対象となる図形（画像）を移動、拡大・縮小、回転や傾斜をつけることができる関数です。例えば、画像をホーバーされたときに使用します。
このときに、目にしたのが「３D空間」という文字でした。’３D’という言葉から「サイコロ」が思い浮かびました。そこで、「css3 3D サイコロ」と検索をしてみたところ、以下のWEBサイトに辿り着きました。
https://alllearnhobby.com/archives/2219.html
サイト内を読むとHTML本体は、次のようになっていました。
<div id="rect">
<div class="rect_part1 default"></div>
<div class="rect_part2 default"></div>
<div class="rect_part3 default"></div>
<div class="rect_part4 default"></div>
<div class="rect_part5 default"></div>
<div class="rect_part6 default"></div>
</div>
ここで、<div ...></div> の間に<img ... />を埋め込めば、正六面体の表面に写真を貼り付けることが、できるかもしれないと思いつきました。そこで、
<div id="rect">
<div class="rect_part1 default"><img src="p_1.jpg" /></div>
<div class="rect_part2 default"><img src="p_2.jpg" /></div>
<div class="rect_part3 default"><img src="p_3.jpg" /></div>
<div class="rect_part4 default"><img src="p_4.jpg" /></div>
<div class="rect_part5 default"><img src="p_5.jpg" /></div>
<div class="rect_part6 default"><img src="p_6.jpg" /></div>
</div>
とコードを変更したところ、写真を貼り付けることができました。
http://plumpanda4.sakura.ne.jp/3d/index.html
