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

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

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

PR広告

3D
- hoop:輪っか
- 輪っか：正転
疑似球体に近づける
- 輪っかの反転
- 15度・75度・135度で交差
Source 公開
- HTML Source
- .css Source
平面円形
- 角度を付け複数配置
- @keyframesで回転
dot sphere 10s

3D

hoop:輪っか

輪っか：正転

<div class="main_wrapper_sj">
 <div class="sphere_wrapper_sjy">
  <img alt decoding="async" class="img-300_sj" src="/wp-content/uploads/2021/12/circle_900-900-12.png">
 </div>
</div>

<style type="text/css">
.img-300_sj { width: 300px;}

.main_wrapper_sj {
  display:flex;
  position:relative;
  transform-style:preserve-3d;
  perspective:300px;
  left:0;top:0;bottom:0;right:0;
  align-items: center;  justify-content: center;
}
.sphere_wrapper_sjy {
  transform-style:preserve-3d;
  width:300px;height:300px;
  position:relative;
  animation:rotate3d_10sjy 10s linear infinite; }
 @keyframes rotate3d_10sjy {
  0%   {transform: rotateX(0) rotateY(0); }
  100% {transform: rotateX(0) rotateY(360deg); }
}
</style>

PR広告

疑似球体に近づける

輪っかを疑似球体に近づける為に回転させる為に、複数の輪っかを15度毎に配置して回転を付けました。（Y軸：0～360）

輪っかの反転

輪っかの周りに簡単な飾りをつけて、X軸：0～-360deg、Y軸：０～360degで、反転させています。

_____

15度・75度・135度で交差

概要

輪っか3枚の画像を60度で交差させ反転させて
輪っかの内外周には、飾りを設けRainbow表示をさせています。
この部分のSource Codeの内容は、それぞれ下の　部分で公開しています。
➡ Codeエリアのマウスホバーでアイコンが表示されます。このアイコン　クリックでSourceをクリップボードにコピーできます。

・●●◎〇

_____

｜｜｜｜｜

CSSでDesign

Source 公開

HTML Source

概要に戻る

上記回転図形と内容(HTML ＆ CSS)を少し変更しています。

<div class="background_custom9 pt_x">

<div class="main_wrapper_xy">
  <div class="sphere_wrapper_xy">
    <div class="plane_xy plane_01"><!--15度-->
      <img alt decoding="async" class="img-300_xy" src="https://xn--ecka7j.biz/wp-content/uploads/2021/12/circle_900-900-12.png">
      <div class="spoke_xy spoke_01"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_02"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_03"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_04"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_05"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_06"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_07"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_08"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_09"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_10"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_11"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_12"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_13"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_14"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_15"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_16"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_17"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_18"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_19"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_20"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_21"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_22"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_23"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_24"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_25"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_26"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_27"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_28"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_29"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_30"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_31"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_32"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_33"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_34"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_35"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
      <div class="spoke_xy spoke_36"><div><span class="Rainbow_t">◎●●●◎◎◎〇〇〇</span></div></div>
    </div>
    <div class="plane_xy plane_05"><!--75度-->
      <img alt decoding="async" class="img-300_xy" src="https://xn--ecka7j.biz/wp-content/uploads/2021/12/circle_900-900-12.png">
      <div class="spoke_xy spoke_01"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_02"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_03"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_04"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_05"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_06"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_07"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_08"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_09"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_10"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_11"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_12"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_13"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_14"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_15"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_16"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_17"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_18"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_19"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_20"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_21"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_22"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_23"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_24"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_25"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_26"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_27"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_28"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_29"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_30"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_31"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_32"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_33"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_34"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_35"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
      <div class="spoke_xy spoke_36"><div><span class="Rainbow_t"><b>__________</b></span></div></div>
    </div>
    <div class="plane_xy plane_09"><!--135度-->
      <img alt decoding="async" class="img-300_xy" src="https://xn--ecka7j.biz/wp-content/uploads/2021/12/circle_900-900-12.png">
      <div class="spoke_xy spoke_01"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_02"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_03"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_04"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_05"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_06"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_07"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_08"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_09"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_10"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_11"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_12"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_13"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_14"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_15"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_16"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_17"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_18"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_19"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_20"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_21"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_22"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_23"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_24"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_25"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_26"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_27"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_28"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_29"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_30"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_31"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_32"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_33"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_34"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_35"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
      <div class="spoke_xy spoke_36"><div><span class="Rainbow_t"><b>｜｜｜｜｜</b></span></div></div>
    </div>
  </div>
</div>
<div>
<p class="text_3x Rainbow_t">
  <i class="bi bi-filetype-css"></i>  CSSでDesign</p>
</div>

</div>

.css Source

概要に戻る

<style>
.background_custom9 {

      color: white;
      background-color: #1111b2;
      font-size: 1.5em;
}
.pt_x {
  padding-top:100px;
  margin-left: 10px;
  }

.img-300_xy {width:300px; height:300px;}

.main_wrapper_xy {
  display:flex;
  position:relative;
  transform-style:preserve-3d;
  perspective:300px;
  left:0;top:0;bottom:0;right:0;
  align-items: center;  justify-content: center;}

.plane_xy{
  position:absolute;
   transform-style:preserve-3d;
   top:0; right:0; bottom:0; left: 0; }

.plane_xy.plane_01 { transform: rotateY(15deg);}
.plane_xy.plane_02 { transform: rotateY(30deg);}
.plane_xy.plane_03 { transform: rotateY(45deg);}
.plane_xy.plane_04 { transform: rotateY(60deg);}
.plane_xy.plane_05 { transform: rotateY(75deg);}
.plane_xy.plane_06 { transform: rotateY(90deg);}
.plane_xy.plane_07 { transform: rotateY(105deg);}
.plane_xy.plane_08 { transform: rotateY(120deg);}
.plane_xy.plane_09 { transform: rotateY(135deg);}
.plane_xy.plane_10 { transform: rotateY(150deg);}
.plane_xy.plane_11 { transform: rotateY(165deg);}
.plane_xy.plane_12 { transform: rotateY(180deg);}

.spoke_xy{
  transform-origin: 0% 0%;
  transform-style:preserve-3d;
  position:absolute;
  color: rgba(127, 255, 255, 0.5);  /*水色*/
  left:  50%;  top: 50%;  height:150px;  width: 0px;
}
.spoke_xy.spoke_01 { transform: rotateZ(10deg);}
.spoke_xy.spoke_02 { transform: rotateZ(20deg);}
.spoke_xy.spoke_03 { transform: rotateZ(30deg);}
.spoke_xy.spoke_04 { transform: rotateZ(40deg);}
.spoke_xy.spoke_05 { transform: rotateZ(50deg);}
.spoke_xy.spoke_06 { transform: rotateZ(60deg);}
.spoke_xy.spoke_07 { transform: rotateZ(70deg);}
.spoke_xy.spoke_08 { transform: rotateZ(80deg);}
.spoke_xy.spoke_09 { transform: rotateZ(90deg);}
.spoke_xy.spoke_10 { transform: rotateZ(100deg);}
.spoke_xy.spoke_11 { transform: rotateZ(110deg);}
.spoke_xy.spoke_12 { transform: rotateZ(120deg);}
.spoke_xy.spoke_13 { transform: rotateZ(130deg);}
.spoke_xy.spoke_14 { transform: rotateZ(140deg);}
.spoke_xy.spoke_15 { transform: rotateZ(150deg);}
.spoke_xy.spoke_16 { transform: rotateZ(160deg);}
.spoke_xy.spoke_17 { transform: rotateZ(170deg);}
.spoke_xy.spoke_18 { transform: rotateZ(180deg);}
.spoke_xy.spoke_19 { transform: rotateZ(190deg);}
.spoke_xy.spoke_20 { transform: rotateZ(200deg);}
.spoke_xy.spoke_21 { transform: rotateZ(210deg);}
.spoke_xy.spoke_22 { transform: rotateZ(220deg);}
.spoke_xy.spoke_23 { transform: rotateZ(230deg);}
.spoke_xy.spoke_24 { transform: rotateZ(240deg);}
.spoke_xy.spoke_25 { transform: rotateZ(250deg);}
.spoke_xy.spoke_26 { transform: rotateZ(260deg);}
.spoke_xy.spoke_27 { transform: rotateZ(270deg);}
.spoke_xy.spoke_28 { transform: rotateZ(280deg);}
.spoke_xy.spoke_29 { transform: rotateZ(290deg);}
.spoke_xy.spoke_30 { transform: rotateZ(300deg);}
.spoke_xy.spoke_31 { transform: rotateZ(310deg);}
.spoke_xy.spoke_32 { transform: rotateZ(320deg);}
.spoke_xy.spoke_33 { transform: rotateZ(330deg);}
.spoke_xy.spoke_34 { transform: rotateZ(340deg);}
.spoke_xy.spoke_35 { transform: rotateZ(350deg);}
.spoke_xy.spoke_36 { transform: rotateZ(360deg);}

.Rainbow_t {
  width:      100%;
   color: transparent;
   -webkit-background-clip: text;   /* -webkit-が無いと、虹色グラデーションにみになる 2022/01/10 */
   background-clip: text;
   background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
   animation : animation_Rainbow32 32s linear infinite;}
  @keyframes   animation_Rainbow32 {
    0% {background-position: 0 0 }
    100%{ background-position: 600px 0px }}

.text_3x {
  margin-top: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  font-size: 3em;
  font-weight: bolder;}

.Background_Text17 {
   width:      100%; 
   color: transparent; 
   -webkit-background-clip: text;
   background-image : linear-gradient(to right,red,orange,yellow,green,aqua,blue,purple);
  animation : animation_Rainbow17 17s linear infinite;}

  @keyframes  animation_Rainbow17 {                    
     0% { background-position: 0 0 } 
   100% { background-position: 600px 0px }
}

/* 次は、平面円形を回転させるための.cssの一部*/
.sphere_wrapper_xy {
  transform-style:preserve-3d;
  width:300px;height:300px;
  position:relative;
  animation:rotate3d_10s-xy 10s linear infinite; }

 @keyframes rotate3d_10s-xy {
  0%   {transform: rotateX(360deg) rotateY(0); }
  100% {transform: rotateX(0) rotateY(360deg); } }
/*　x軸0～0deg：y軸0～360deg
 @keyframes rotate3d_10s-xy が無いと静止した状態 */  


</style>

平面円形

角度を付け複数配置

同じ平面円形をY軸に10度毎ずらして配置

@keyframesで回転

.css定義の.sphere_wrapper_sjy-x {内に定義した
animation:rotate3d_10sjy-x 10s linear infinite; 部分「rotate3d_10sjy-x」に対して
@keyframes で、
「rotate3d_10sjy-x」の動き「x軸0～0deg：y軸0～360deg」を定義する。
@keyframesが無いと静止した状態になります。

.sphere_wrapper_sjy-x {
　transform-style:preserve-3d;
　width:300px;height:300px;
　position:relative;
　animation: rotate3d_10sjy-x 10s linear infinite; }
@keyframes rotate3d_10sjy-x {
　0% {transform: rotateX(-45deg) rotateY(0); }
　100% {transform: rotateX(-45deg) rotateY(360deg); } }
※．ｘ軸は-45degで固定　（前方向に傾ける）　

dot sphere 10s

ドット（点）で球体を表してみました。

3D