3D-kantelkaart met glans
A card tilts in 3D with the cursor, with a glare moving across the surface and a raised layer; for products or case studies.
Case · 2026
Bakkerij Mulder
Bestellen voor 10 uur, ophalen in Zwolle. +38% online orders.
How to use it
- Paste the HTML where the components should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- 3D-kantelkaart met glans · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ei-tlt"><div class="ei-tlt__c"><span class="ei-tlt__k">Case · 2026</span><h4 class="ei-tlt__h">Bakkerij Mulder</h4><p class="ei-tlt__p">Bestellen voor 10 uur, ophalen in Zwolle. +38% online orders.</p><span class="ei-tlt__g"></span></div></div>
</div>/* 3D-kantelkaart met glans · NedDev · eigen werk. */
.ei-tlt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:800px}
.ei-tlt__c{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;position:relative;width:62%;max-width:250px;aspect-ratio:4/3;box-sizing:border-box;padding:18px;border-radius:6px;background:linear-gradient(150deg,#F5480F,#c7360a);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 18px 40px -18px rgba(10,10,10,.45);overflow:hidden}
.ei-tlt__c.is-on{transition:transform .08s linear}
.ei-tlt__k{position:absolute;top:16px;left:18px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.ei-tlt__h{margin:0 0 6px;font-family:'Switzer',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;transform:translateZ(40px)}
.ei-tlt__p{margin:0;font-family:'Switzer',sans-serif;font-size:12px;line-height:1.45;opacity:.9;transform:translateZ(24px)}
.ei-tlt__g{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.45),transparent 55%);opacity:0;transition:opacity .4s;mix-blend-mode:soft-light}
.ei-tlt__c.is-on .ei-tlt__g{opacity:1}// 3D-kantelkaart met glans · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ei-tlt'),c=w.querySelector('.ei-tlt__c');
if(!matchMedia('(prefers-reduced-motion: reduce)').matches){
w.addEventListener('pointermove',function(e){var r=c.getBoundingClientRect(),px=(e.clientX-r.left)/r.width,py=(e.clientY-r.top)/r.height;px=Math.max(-.2,Math.min(1.2,px));py=Math.max(-.2,Math.min(1.2,py));
c.classList.add('is-on');c.style.setProperty('--ry',((px-.5)*22).toFixed(2)+'deg');c.style.setProperty('--rx',((.5-py)*18).toFixed(2)+'deg');c.style.setProperty('--gx',(px*100)+'%');c.style.setProperty('--gy',(py*100)+'%');});
w.addEventListener('pointerleave',function(){c.classList.remove('is-on');c.style.setProperty('--rx','0deg');c.style.setProperty('--ry','0deg');});}
}
init(document.querySelector('.jouw-container'));More components
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →