3D Carousel New

<!-- 3D Carousel · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="c3d"><div class="c3d__scene"><div class="c3d__ring">
<div class="c3d__c c3d__c--o"><span>01</span><b>Den Haag</b></div><div class="c3d__c"><span>02</span><b>Delft</b></div><div class="c3d__c c3d__c--w"><span>03</span><b>Leiden</b></div><div class="c3d__c"><span>04</span><b>Gouda</b></div>
<div class="c3d__c c3d__c--o"><span>05</span><b>Utrecht</b></div><div class="c3d__c"><span>06</span><b>Breda</b></div><div class="c3d__c c3d__c--w"><span>07</span><b>Zwolle</b></div><div class="c3d__c"><span>08</span><b>Venlo</b></div>
</div></div><span class="c3d__hint">sleep om te draaien</span></div>
</div>

/* 3D Carousel · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.c3d{position:absolute;inset:0;background:#0a0a0a;overflow:hidden;cursor:grab;touch-action:pan-y;font-family:'Switzer',system-ui,sans-serif;user-select:none}
.c3d.is-drag{cursor:grabbing}
.c3d__scene{position:absolute;inset:0;perspective:760px;display:flex;align-items:center;justify-content:center}
.c3d__ring{position:relative;width:92px;height:124px;transform-style:preserve-3d}
.c3d__c{position:absolute;inset:0;border-radius:4px;background:#2a2a2a;color:#fff;padding:8px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(255,255,255,.12)}
.c3d__c span{font:500 10px 'JetBrains Mono',monospace;opacity:.7}
.c3d__c b{font-size:13px;font-weight:700}
.c3d__c--o{background:#F5480F;border-color:#F5480F}
.c3d__c--w{background:#f4f3f1;color:#0a0a0a;border-color:#f4f3f1}
.c3d__hint{position:absolute;left:12px;bottom:10px;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);pointer-events:none}

// 3D Carousel · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.c3d')||root;var ring=root.querySelector('.c3d__ring'),cards=[].slice.call(root.querySelectorAll('.c3d__c'));var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
var n=cards.length,R=Math.round(46/Math.tan(Math.PI/n))+12;cards.forEach(function(c,i){c.style.transform='rotateY('+(i*360/n)+'deg) translateZ('+R+'px)';});
var ang=0,vel=0,drag=false,lx=0,vis=true;function draw(){ring.style.transform='translateZ(-'+R+'px) rotateX(-9deg) rotateY('+ang.toFixed(2)+'deg)';cards.forEach(function(c,i){var a=((i*360/n+ang)%360+360)%360;var f=Math.cos(a*Math.PI/180);c.style.opacity=(.45+.55*(f+1)/2).toFixed(2);});}
root.addEventListener('pointerdown',function(e){drag=true;lx=e.clientX;vel=0;root.classList.add('is-drag');root.setPointerCapture(e.pointerId);});
root.addEventListener('pointermove',function(e){if(!drag)return;var d=e.clientX-lx;lx=e.clientX;ang+=d*.45;vel=d*.45;if(reduce)draw();});
function up(){drag=false;root.classList.remove('is-drag');}root.addEventListener('pointerup',up);root.addEventListener('pointercancel',up);
if('IntersectionObserver' in window)new IntersectionObserver(function(es){vis=es[0].isIntersecting;}).observe(root);
draw();if(reduce)return;(function loop(){if(vis){if(!drag){vel*=.94;ang+=vel+(Math.abs(vel)<.3?.18:0);}draw();}requestAnimationFrame(loop);})();
}
init(document.querySelector('.jouw-container'));