3Dタグクラウド・スフィア演出

<div class="d08-05-11-wrap">
          <div class="d08-05-11-stage">
            <div class="d08-05-11-sphere"></div>
          </div>
          <p class="d08-05-11-hint">ドラッグして回転</p>
        </div>

.d08-05-11-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
        .d08-05-11-stage{position:relative;width:190px;height:160px;perspective:600px;cursor:grab}
        .d08-05-11-stage:active{cursor:grabbing}
        .d08-05-11-sphere{position:relative;width:100%;height:100%;transform-style:preserve-3d}
        .d08-05-11-tag{position:absolute;left:50%;top:50%;padding:4px 10px;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:11px;font-weight:700;white-space:nowrap;transform-style:preserve-3d}
        .d08-05-11-hint{margin:0;font-size:11px;color:#94a3b8}

(function(){
        var root=document.getElementById('item-08-05-11');if(!root)return;
        var stage=root.querySelector('.d08-05-11-stage');
        var sphere=root.querySelector('.d08-05-11-sphere');
        var words=['WordPress','SEO','デザイン','React','UI/UX','高速化','レスポンシブ','アクセシビリティ','ブログ','EC','CMS','マーケ','A/Bテスト','PWA'];
        var R=72, n=words.length;
        words.forEach(function(w,i){
          var span=document.createElement('span');
          span.className='d08-05-11-tag';
          span.textContent=w;
          var y=1-(i/(n-1))*2;
          var r=Math.sqrt(1-y*y);
          var theta=2.4*i;
          var x=Math.cos(theta)*r, z=Math.sin(theta)*r;
          span.style.transform='translate3d('+(x*R)+'px,'+(y*R)+'px,'+(z*R)+'px) translate(-50%,-50%)';
          sphere.appendChild(span);
        });
        var rx=-8, ry=0, dragging=false, lastX=0, lastY=0;
        function render(){ sphere.style.transform='rotateX('+rx+'deg) rotateY('+ry+'deg)'; }
        stage.addEventListener('mousedown',function(e){dragging=true;lastX=e.clientX;lastY=e.clientY;});
        window.addEventListener('mousemove',function(e){
          if(!dragging)return;
          ry+=(e.clientX-lastX)*.5;
          rx-=(e.clientY-lastY)*.5;
          lastX=e.clientX;lastY=e.clientY;
        });
        window.addEventListener('mouseup',function(){dragging=false;});
        function loop(){
          if(!dragging) ry+=0.25;
          render();
          requestAnimationFrame(loop);
        }
        loop();
      })();