もっと詳しく

アイキャッチで使用した画像(図形)をcssを使って3D表示させ、更にその図形を回転させてみる。

カスタム MTML in

カスタム MTML out

mp4 でも、gifアニメ でもない

動画に見えるけど、
.mp4 でも、.gif アニメーションでもないんです。
 最初の画像は、1つの図形を10度ごとに設け、360度で都合18枚の平面画像を回転させ3D表現を実現させています。

もう一つ 3D アニメーション

こちらの画像は、15度ごと、12枚の画像を使用しています。その分球体の表現が荒くなります。
ただ、300pxにしているので、それ程目立たないと思います(最初の画像は450pxです。)

角度を5度にし、36枚3D表現をしてみたら、球体表現は大分きれいになったのですが、今度はサーバーと通信速度の関係で滑らかな描画ではなくなり掲載を止めました。(ローカルのPC上での表示は問題なかった)

(上記の描画でも、スマホでの表示は多少パラパラ漫画の様な表示になります。スマホの性能が上がっても、まだまだパソコンの性能には及ばないということですネ)