3D Extruded Text

<!-- 3D Extruded Text · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="e3d-stage"><h3 class="e3d"><span class="e3d-inner">EXTRUDE</span></h3></div>
</div>

/* 3D Extruded Text · NedDev · eigen werk. */
.e3d-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.e3d{perspective:700px;font:900 clamp(30px,8vw,72px)/1 'Boldonse','Switzer',sans-serif;margin:0}
.e3d-inner{display:inline-block;color:#fff;transform-style:preserve-3d;transition:transform .15s ease-out;text-shadow:1px 1px 0 #d63f0d,2px 2px 0 #c43a0c,3px 3px 0 #b2350b,4px 4px 0 #a0300a,5px 5px 0 #8e2b09,6px 6px 12px rgba(0,0,0,.4);-webkit-text-stroke:1.5px #F5480F}

// 3D Extruded Text · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.e3d')||root;var inner=root.querySelector('.e3d-inner');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;root.addEventListener('pointermove',function(e){var r=root.getBoundingClientRect();var rx=((e.clientY-r.top)/r.height-.5)*-26;var ry=((e.clientX-r.left)/r.width-.5)*26;inner.style.transform='rotateX('+rx+'deg) rotateY('+ry+'deg)';});root.addEventListener('pointerleave',function(){inner.style.transform='rotateX(0) rotateY(0)';});
}
init(document.querySelector('.jouw-container'));