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

サンプル(例)で提示している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概略
実表示
- HTMLとCSSだけ
  - 動く3Dデザイン
主要css公開
- css概説

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で変化します。
円の面積（πr²）を求め定数(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;
}