動画ではなく、cssで 3D・2D デザイン&回転

3D Designデザイン
HTMLとCSSで、3D Design 回転も!

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

カスタム HTML in

正転


反転

_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____
_____

カスタム HTML out

スポンサーリンク

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

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

3D アニメーション

3Dアニメーション
「iPhoneiPadでも動作させるために」は、注意事項があります。
★以降を読み進めてください。

下の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枚3D表現をしてみたら、球体表現は大分きれいになったのですが、今度は描画負荷の関係で滑らかな描画ではなくなり掲載を止めました。(ローカルのPC上での表示は問題なかった)

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

3d Cube 6個

Cubeを2の累乗(0~5)秒で回転

01
02
03
04
05
06
11
12
13
14
15
16
21
22
23
24
25
26
31
32
33
34
35
36
41
42
43
44
45
46
51
52
53
54
55
56

duration:32秒 (ファントム ゾーン)


1
2
3
4
5
6


10s & 16s


(1)
(2)
(3)
(4)
(5)
(6)
1
2
3
4
5
6



10秒#型 10s

rotateX(360deg)  rotateY(360deg)
width: 200px; height: 200px; line-height: 200px; translateZ(50px);


21
22
23
24
25
26



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); } }


31
32
33
34
35
36



Click Cube !!!


回転しているCube面のアイコン文字クリックできます。


ぜひ クリックしてみてください。

in_Cube # 32s 8s


21
22
23
24
25
26




2重の回転 32s 8s

01
02
03
04
05
06


3重回転:4s_16s_32s css calc

1
2
3
4
5
6


 ★

iPhoneでは動作せず問題の解決
パソコンではどちらの定義方法でも問題なく動作するが、
iPhoneiPadでも動作させるためには、定義方法を統一する必要がある。以下、備忘録。

回転用 css

iPhoneiPadでも動作させるため(@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




__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||
__|||

WebMでイメージ再生

WebM再生を ChromeFirefoxEdgeで確認!? 
再度再生には「」クリックが必要です。ここではLoop再生の指定をしていませんiPhoneiPadでの再生はできません。WebMは元々ストリーミング配信するために作られた動画形式で、スマホ/タブレット等の携帯デバイスのデフォルトプレーヤーでは再生できません。)

サイトの応答性を高めるために、アニメーション.gifを止めて、.webmに変更。自動&Loop再生のためには(controls loop muted autoplay playsinline)の設定が必要です。

スポンサーリンク

次は、2Dアニメーション

  
  

  
  

  
  

  
  

  
  

      
  

      
  

      
  

Ball

コメント