視差3Dレイヤーシーン

<div class="d08-05-06-scene">
          <div class="d08-05-06-layer d08-05-06-l1"></div>
          <div class="d08-05-06-layer d08-05-06-l2"></div>
          <div class="d08-05-06-layer d08-05-06-l3">立体視差シーン</div>
        </div>

.d08-05-06-scene{position:relative;width:100%;max-width:280px;height:180px;border-radius:14px;overflow:hidden;perspective:600px;background:radial-gradient(circle at 30% 20%,#312e81,#0f172a 70%)}
        .d08-05-06-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform .15s ease-out}
        .d08-05-06-l1{background-image:radial-gradient(#818cf8 1px,transparent 1px);background-size:24px 24px;opacity:.4}
        .d08-05-06-l2::before{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:rgba(129,140,248,.35);filter:blur(2px)}
        .d08-05-06-l3{color:#e0e7ff;font-size:13px;font-weight:700;letter-spacing:.05em;text-shadow:0 4px 12px rgba(0,0,0,.4)}

(function(){
        var root=document.getElementById('item-08-05-06');if(!root)return;
        var scene=root.querySelector('.d08-05-06-scene');
        var layers=root.querySelectorAll('.d08-05-06-layer');
        scene.addEventListener('mousemove',function(e){
          var r=scene.getBoundingClientRect();
          var x=(e.clientX-r.left)/r.width-.5;
          var y=(e.clientY-r.top)/r.height-.5;
          scene.style.transform='rotateY('+(x*8)+'deg) rotateX('+(-y*8)+'deg)';
          layers.forEach(function(l,i){
            var depth=(i+1)*12;
            l.style.transform='translate3d('+(-x*depth)+'px,'+(-y*depth)+'px,0)';
          });
        });
        scene.addEventListener('mouseleave',function(){
          scene.style.transform='rotateY(0) rotateX(0)';
          layers.forEach(function(l){l.style.transform='translate3d(0,0,0)';});
        });
      })();