デザイン：CSSで作る動かすアニメーションDesign 3D・2D

css ：デザイン

Sphrer

2021.12.052024.02.16

記事内に広告が含まれています。

ドット（dot）リング（ring）円盤（disk）を使って回転させ疑似球体（sphere）。四角（square）を使って作る疑似立方体（Cube）などなど、.jsを使わないで、HTMLとcssだけで、更に動かすDesign

Thank you for reading this post, don't forget to subscribe!

PR広告

3D
mp4 でも、gifアニメでもない
3D アニメーション
次は、2Dアニメーション

3D

.cssとhtmlを開放

.cssとhtmlの部分開放を、以下のブログカードクリックでご覧いただけます。

デザイン：cssで3D ＆回転Design　ソースコードを確認＆コピペできます。

デザインで遊んでみました。このままの形で実際に、使うことが少ないかもしれませんが、ややこしい部分はHTMLと.cssのSource Codeをご覧いただけます。コピペすればそのままの形で利用できますので。チョッとした発想の転換や他に応用で来...

3D回転

disk➡3D

x軸：-45deg固定、y軸:0～720degで回転

3D Design

反転

ring x軸：0～-360deg、y軸:0～360degで回転

_____

PR広告

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

dot　 x軸：0～-360deg、y軸:0～-360degで回転

.spoke1j{ transform-origin: 0 0; transform-style:preserve-3d; position:absolute; left:50%;top:50%; height:200px; width: 0px;}

図形の方も、もっと滑らかな表現をしたいと思ったが、

角度を5度にし、36枚で３D表現をしてみたら、球体表現は大分きれいになったのですが、今度は描画負荷の関係で滑らかな描画ではなくなり掲載を止めました。（ローカルのPC上での表示は問題なかった）

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