const cardElement = document.getElementsByTagName("img")[0]

const MAX_ROTATE_X = 20

const MAX_ROTATE_Y = 18

​

const onMouseMove = (event) => {

    const card = {

        halfHeight: event.target.height/2,

        halfWidth: event.target.width/2

    }

    const degsToRotateY = (card.halfWidth - event.offsetX) * MAX_ROTATE_Y / card.halfWidth

    const degsToRotateX = (card.halfHeight - event.offsetY) * -MAX_ROTATE_X / card.halfHeight

    event.target.style.transform = `rotateX(${degsToRotateX}deg) rotateY(${degsToRotateY}deg)`

}

​

const applySlowTransitionAnimation = (mouseOutEvent) => {

    mouseOutEvent.target.style.transition = "400ms ease-out"

}

​

const applyFastTransitionAnimation = (mouseEnterEvent) => {

    mouseEnterEvent.target.style.transition = "50ms linear"

}

​

const resetCardPosition = (mouseOutEvent) => {

    mouseOutEvent.target.style.transform = "rotateX(0deg) rotateY(0deg)"

}

​

cardElement.addEventListener("mouseenter", (event) => {

    applyFastTransitionAnimation(event)

    cardElement.addEventListener("mousemove", onMouseMove)

})

​

cardElement.addEventListener("mouseout", (event) => {

    applySlowTransitionAnimation(event)

    resetCardPosition(event)

    cardElement.removeEventListener("mousemove", onMouseMove)

})

​