HTMLとCSSだけで作る動く3Dデザイン ➡ Copyできます。

Design css ：デザイン
動く3Dデザイン
2024.01.26
記事内に広告が含まれています。

サンプル(例)で提示しているHTMLとCSSは、記載欄右上の　　Copyアイコンでコピーできます。

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

XY軸の値（可変）を求める為に、三角関数：sin , cos を使っています。円の面積を求め定数で割って、動く３Dの表示の範囲を可変にしています。（面積内でねじれながら可変３D表示）グリッドデザイン：グリッドコンテナを利用しています。見出しと概説はコンテナ内の最初に記述しています。 見出しの前から後ろに表示されることで３D表示がおわかり戴けると思います。（部分透過も）

HTMLとCSSのコピペで大まかなデザインを利用できます。
後は、HTMLの省略部分を例に合わせて追加したり、追加のCSSでお好みのデザインに変更できます。

PR広告

HTMLとCSSだけで作る

HTML概略

<div class="content_j2">
  <!--省略-->
  <!--省略-->
　<!--省略-->
  <div class="a_color" style="--kakudo:000deg; --teisuu:30">000 </div>
  <div class="a_color" style="--kakudo:003deg; --teisuu:30">003 </div>
  <div class="a_color" style="--kakudo:006deg; --teisuu:30">006 </div>
  <div class="a_color" style="--kakudo:009deg; --teisuu:30">009 </div>
  <div class="a_color" style="--kakudo:012deg; --teisuu:30">012 </div>
  <div class="a_color" style="--kakudo:015deg; --teisuu:30">015 </div>
  <div class="a_color" style="--kakudo:018deg; --teisuu:30">018 </div>
  <div class="a_color" style="--kakudo:021deg; --teisuu:30">021 </div>
  <div class="a_color" style="--kakudo:024deg; --teisuu:30">024 </div>
  <div class="a_color" style="--kakudo:027deg; --teisuu:30">027 </div>
  <div class="a_color" style="--kakudo:030deg; --teisuu:30">030 </div>
  <div class="a_color" style="--kakudo:033deg; --teisuu:30">033 </div>
  <div class="a_color" style="--kakudo:036deg; --teisuu:30">036 </div>
  <div class="a_color" style="--kakudo:039deg; --teisuu:30">039 </div>
  <div class="a_color" style="--kakudo:042deg; --teisuu:30">042 </div>
  <div class="a_color" style="--kakudo:045deg; --teisuu:30">045 </div>
  <div class="a_color" style="--kakudo:048deg; --teisuu:30">048 </div>
  <div class="a_color" style="--kakudo:051deg; --teisuu:30">051 </div>
  <div class="a_color" style="--kakudo:054deg; --teisuu:30">054 </div>
  <div class="a_color" style="--kakudo:057deg; --teisuu:30">057 </div>
  <div class="a_color" style="--kakudo:060deg; --teisuu:30">060 </div>
  <div class="a_color" style="--kakudo:063deg; --teisuu:30">063 </div>
  <div class="a_color" style="--kakudo:066deg; --teisuu:30">066 </div>
  <div class="a_color" style="--kakudo:069deg; --teisuu:30">069 </div>
  <div class="a_color" style="--kakudo:072deg; --teisuu:30">072 </div>
  <div class="a_color" style="--kakudo:075deg; --teisuu:30">075 </div>
  <div class="a_color" style="--kakudo:078deg; --teisuu:30">078 </div>
  <div class="a_color" style="--kakudo:081deg; --teisuu:30">081 </div>
  <div class="a_color" style="--kakudo:084deg; --teisuu:30">084 </div>
  <div class="a_color" style="--kakudo:087deg; --teisuu:30">087 </div>
  <div class="a_color" style="--kakudo:090deg; --teisuu:30">090 </div>

  <!--中略-->

  <div class="a_color" style="--kakudo:339deg; --teisuu:30">339 </div>
  <div class="a_color" style="--kakudo:342deg; --teisuu:30">342 </div> 
  <div class="a_color" style="--kakudo:345deg; --teisuu:30">345 </div>
  <div class="a_color" style="--kakudo:348deg; --teisuu:30">348 </div>
  <div class="a_color" style="--kakudo:351deg; --teisuu:30">351 </div>
  <div class="a_color" style="--kakudo:354deg; --teisuu:30">354 </div>
  <div class="a_color" style="--kakudo:357deg; --teisuu:30">357 </div>
  <div class="a_color" style="--kakudo:360deg; --teisuu:30">360 </div>
 </div>
PR広告

実表示

ここの記述はHTMLのみです。







HTMLとCSSだけ

動く3Dデザイン

虹色グラデーション3D

XY軸の値を求める為に、三角関数：sin , cos を使っています。
x軸=cos(角度*距離)、y軸=sin(角度*距離) 角度は0～360で変化します。
円の面積（πr2）を求め定数(30)で割って動く３Dの表示範囲を可変にしています（面積内でねじれ表示）
グリッドデザイン：コンテナ（display:grid）を利用しています。見出しと概説はコンテナ内の最初に記述しています。
見出しの前後に表示(部分透過)されることで３D表示がおわかり戴けると思います。

000
003
006
009
012
015
018
021
024
027
030
033
036
039
042
045
048
051
054
057
060
063
066
069
072
075
078
081
084
087
090
093
096
099
102
105
108
111
114
117
120
123
126
129
132
135
138
141
144
147
150
153
156
159
162
165
168
171
174
177
180
183
186
189
192
195
198
201
204
207
210
213
216
219
222
225
228
231
234
237
240
243
246
249
252
255
258
261
264
267
270
273
276
279
282
285
288
291
294
297
300
303
306
309
312
315
318
321
324
327
330
333
336
339
342
345
348
351
354
357
360

主要css公開

.a_color {
  position: absolute;
  display: grid;
  --hankei: 50%;
  transform-style: preserve-3d;
  box-sizing: border-box;
  --kyori: 30vmin;
  --s: calc((var(--hankei) * 2 * 3.14 / var(--teisuu, 1)));
  width: var(--s); 
  height: 50%; 
  top: calc(50% - var(--s) / 2); 
  left: calc(50% - var(--s) / 2); 
  --x: calc(cos(var(--kakudo)) * var(--kyori));
  --y: calc(sin(var(--kakudo)) * var(--kyori)); 
  translate: var(--x) var(--y); 
  --hanbun: calc(var(--s) * 0.5);
  transform-origin: calc(var(--hanbun) - var(--x)) calc(var(--hanbun) - var(--y));
  transform: rotatex(var(--kakudo));	
  background: linear-gradient(25deg,red,orange,yellow,limegreen,green,aqua,blue,purple);
  animation: mawari 136s linear infinite -2s; } 
@keyframes mawari {
  from {transform: rotatey(0deg) rotatex(var(--kakudo)) rotatez(calc(1440deg - var(--kakudo)));}
  to {transform: rotatey(-360deg) rotatex(var(--kakudo)) rotatez(calc(-1 * var(--kakudo)));}
}
.content_j2 {
 transform-style: preserve-3d;
 width: 50vmin;
 aspect-ratio: 1;
 position: relative;
 border-radius: 100vmax;
 display: grid;
 align-content: center;
 justify-content: center;
 filter: drop-shadow(0px 0px 2px #fff) drop-shadow(10px 10px 4px #000 5);
 animation: hajiku 100s ease infinite alternate;
}

css概説

.a_color {
   position: absolute;/*絶対位置*/
   border: 1px solid;
   display: grid;
   /*グリッドコンテナを作成する為、要素に対してdisplay:grid を指定*/
   --hankei: 50%; /* 半径=50% */
   transform-style: preserve-3d;
   box-sizing: border-box;
   /* 要素の全体の幅と高さ=width および height プロパティは、コンテンツ、パディング、境界の各領域を含み、マージンは含まない */
  --kyori: 30vmin; /* 距離：「viewport minimum」表示領域の最小値 */
  --s: calc((var(--hankei) * 2 * 3.14 / var(--teisuu, 1)));
       /* 円の面積を--teisuu(30)で割り表示範囲を計算 */
  width: var(--s); /* 幅=上記の計算で求めた値 */
  height: 50%; /* 高さ=50% */
  top: calc(50% - var(--s) / 2); /*top位置計算*/
  left: calc(50% - var(--s) / 2); /*左位置計算*/
  --x: calc(cos(var(--kakudo)) * var(--kyori)); /* x軸=cos(角度（可変）*距離（可変）)*/
  --y: calc(sin(var(--kakudo)) * var(--kyori)); /* y軸=sin(角度（可変）*距離（可変）)*/
  translate: var(--x) var(--y); 
  /* 平行移動の座標変換を独自に、transform プロパティから独立して指定 */
  --hanbun: calc(var(--s) * 0.5); /*表示範囲の中心（原点）を求める為に（半分）*/
  transform-origin: calc(var(--hanbun) - var(--x)) calc(var(--hanbun) - var(--y));
  /* 要素の座標変換 (transform) における原点 */
  transform: rotatex(var(--kakudo));
  /* 与えられた要素を回転、拡大縮小、傾斜、移動する。視覚整形モデルの座標空間を変更 */
  background: linear-gradient(25deg,red,orange,yellow,limegreen,green,aqua,blue,purple);
  animation: mawari 136s linear infinite -2s; }  
@keyframes mawari {
  from {transform: rotatey(0deg) rotatex(var(--kakudo)) rotatez(calc(1440deg - var(--kakudo)));}
  to {transform: rotatey(-360deg) rotatex(var(--kakudo)) rotatez(calc(-1 * var(--kakudo)));}
}
.content_j2 {
   transform-style: preserve-3d;
   width: 50vmin;/*「viewport minimum」*/
   /*ブラウザ表示領域の幅と高さのうち、値が小さい方に対する割合*/
   aspect-ratio: 1;/*ボックスの推奨アスペクト比を設定*/
   position: relative;/*現在位置を基準に、相対位置を指定*/
   border-radius: 100vmax;/*「viewport max」*/
   /*ブラウザ表示領域の幅と高さのうち、値が大きい方に対する割合*/
   display: grid;
   /*グリッドコンテナーを作成する為、要素に対して display: gridを指定。*/
   align-content: center;
   /*フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の空間の配分方法を設定*/
   justify-content: center;
    /*フレックスコンテナーの主軸およびグリッドコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義*/
    filter: drop-shadow(0px 0px 2px #fff) drop-shadow(10px 10px 4px #000 5);
    /*入力画像にドロップシャドウ効果を適用*/
    animation: hajiku 100s ease infinite alternate;
}
PR広告
タイトルとURLをコピーしました