card3d.js

me().on('mouseenter', ev => {
    let e = me(ev)
    e.bounds = e.getBoundingClientRect()
    e.on('mousemove', e.rotateToPointer)
}).on('mouseleave', ev => {
    let e = me(ev)
    e.off('mousemove', e.rotateToPointer)
    e.style.transform = e.style.background = ''
})

// Use a separate function for touch events to allow passive listener
function handleTouchStart(ev) {
    let e = me(ev)
    e.bounds = e.getBoundingClientRect()
    e.addEventListener('touchmove', e.rotateToPointer, { passive: true })
    e.addEventListener('touchend', handleTouchEnd, { passive: true })
}

function handleTouchEnd(ev) {
    let e = me(ev.target)
    e.removeEventListener('touchmove', e.rotateToPointer)
    e.removeEventListener('touchend', handleTouchEnd)
    e.style.transform = e.style.background = ''
}

me().addEventListener('touchstart', handleTouchStart, { passive: true })

me().rotateToPointer = ev => {
    let e = me(ev.target), b = e.bounds
    let x, y
    if (ev.type === 'touchmove') {
        x = ev.touches[0].clientX - b.x - b.width / 2
        y = ev.touches[0].clientY - b.y - b.height / 2
    } else {
        x = ev.clientX - b.x - b.width / 2
        y = ev.clientY - b.y - b.height / 2
    }
    let d = Math.hypot(x,y)
    let amt = {amt}
    e.style.transform = `scale3d(${ 1 + 0.07 * amt }, ${ 1 + 0.07 * amt }, 1.0)
                         rotate3d(${ y/100*amt }, ${ -x/100*amt }, 0, ${ Math.log(d)*2*amt }deg)`
    me('div', e).style.backgroundImage = `radial-gradient(
        circle at ${ x*2 + b.width/2 }px ${ y*2 + b.height/2 }px, #ffffff77, #0000000f)`
}