3D Flip Coin

<!-- 3D Flip Coin · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="fc3-scene"><div class="fc3-coin"><div class="fc3-face fc3-front">N</div><div class="fc3-face fc3-back">&euro;</div><div class="fc3-edge"></div></div><span class="fc3-hint">klik om te tossen</span></div>
</div>

/* 3D Flip Coin · NedDev · eigen werk. */
.fc3-scene{perspective:800px;text-align:center;font-family:'Boldonse',system-ui,sans-serif}
.fc3-coin{position:relative;width:110px;height:110px;margin:0 auto;transform-style:preserve-3d;cursor:pointer;transition:transform 1.6s cubic-bezier(.3,1.1,.4,1)}
.fc3-face{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;backface-visibility:hidden;border:5px solid #fff}
.fc3-front{background:radial-gradient(circle at 35% 30%,#ff7a45,#F5480F);color:#fff;box-shadow:0 8px 20px rgba(245,72,15,.35)}
.fc3-back{background:radial-gradient(circle at 35% 30%,#3a3a3a,#0a0a0a);color:#fff;transform:rotateY(180deg)}
.fc3-edge{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(10,10,10,.1) inset}
.fc3-hint{display:block;margin-top:24px;font-family:'Switzer',system-ui,sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.4)}

// 3D Flip Coin · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.fc3-scene')||root;var coin=root.querySelector('.fc3-coin');var flips=0;var busy=false;var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;coin.addEventListener('click',function(){if(busy)return;busy=true;var heads=Math.random()<.5;var spins=reduce?1:(2+Math.floor(Math.random()*2));flips+=spins*360+(heads?0:180);if(reduce){coin.style.transition='transform .3s';coin.style.transform='rotateY('+(heads?0:180)+'deg)';}else{coin.style.transform='rotateY('+flips+'deg)';}setTimeout(function(){busy=false;},reduce?320:1600);});
}
init(document.querySelector('.jouw-container'));