アイキャッチで使用した画像（図形）をcssを使って３D表示させ、更にその図形を回転させてみる。
Thank you for reading this post, don't forget to subscribe!.cssとhtmlを開放
.cssとhtmlの部分を、以下のブログカードクリックでご覧いただけます。
カスタム HTML in
正転
反転
カスタム HTML out
mp4 でも、gifアニメ でもない
動画に見えますか？でも・これ、
.mp4 でも、.gif アニメーションでもないんです。
最初の画像は、１つの図形を10度ごとに設け、360度で都合18枚の平面画像を回転させ３D表現を実現させています。
3D アニメーション
３Dアニメーション
「iPhone・iPadでも動作させるために」は、注意事項があります。
★以降を読み進めてください。
下の3dは、
transform-origin: 0 0; が効かない（？）
（ transform-origin: 0% 0%; とし、
はみ出し防止;
height:200px;➡height:160px;）
dot sphere 10s
.spoke1j{ transform-origin: 0 0; transform-style:preserve-3d; position:absolute; left:50%;top:50%; height:200px; width: 0px;}
角度を5度にし、36枚で３D表現をしてみたら、球体表現は大分きれいになったのですが、今度は描画負荷の関係で滑らかな描画ではなくなり掲載を止めました。（ローカルのPC上での表示は問題なかった）
（上記の描画でも、スマホでの表示は多少パラパラ漫画の様な表示になります。スマホの性能が上がっても、まだまだパソコンの性能には及ばないということですネ）
3d Cube 6個
Cubeを２の累乗（0～5)秒で回転
duration:32秒 （ファントム ゾーン）
phantom-zone
10s ＆ 16s
10秒＃型 10s
rotateX(360deg) rotateY(360deg)
width: 200px; height: 200px; line-height: 200px; translateZ(50px);
16秒角の面取りイメージ 16s
translateZ(106px); width:206px; height: 206px; line-height: 206px;
@keyframesrotate-anim13 {
0%{transform: rotateX(0) rotateY(0); }
100% {transform: rotateX(–360deg) rotateY(360deg); } }
Click Cube !!!
回転しているCube面のアイコンと文字はクリックできます。
ぜひ クリックしてみてください。
in_Cube # 32s 8s
2重の回転 32s 8s
3重回転：4s_16s_32s css calc
★
iPhoneでは動作せず問題の解決
パソコンではどちらの定義方法でも問題なく動作するが、
iPhone・iPadでも動作させるためには、定義方法を統一する必要がある。以下、備忘録。
回転用 css
iPhone・iPadでも動作させるため（@keyframes #注.記載方法）
@keyframes rotate3d_s2 {
0% {transform: rotateX(0) rotateY(0); }
100% {transform: rotateX(-360deg) rotateY(360deg); } }
以下の書き方は、パソコンでは、問題なく動作する（が）
@keyframes rotate3d_s2 {
0% {transform: rotate3d(1, 1, 1, 0deg);}
100% {transform: rotate3d(1, 1, 1, 360deg);}}
この場合、rotate3dでは、iPhone・iPadでは動作しない。
rotateX（）と、rotateY（）の様に軸ごと個別に指定する必要がある。
アニメーション css
.sphere-wrapper_s2{
transform-style:preserve-3d;
width:300px;height:300px;
position:relative;
animation: rotate3d_s2 10s linear infinite;}
dot_sphere & alpha 32s - 10deg
Star animation 12s - 5deg
図形の方も、もっと滑らかな表現をしたいと思ったが、