<style>
.wrapper--image{
    perspective:1200px;
    cursor:pointer;
}

.wrapper--image a{
    display:block;
    transform-style:preserve-3d;
    transition:transform .18s ease;
}

.wrapper--image img{
    border-radius:18px;
    transition:.2s ease;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.wrapper--image:hover img{
    transform:scale(1.06);
}
</style>

<script>
document.querySelectorAll('.wrapper--image').forEach(card=>{

const item=card.querySelector('a');

card.addEventListener('mousemove',e=>{

const rect=card.getBoundingClientRect();

const x=e.clientX-rect.left;
const y=e.clientY-rect.top;

const centerX=rect.width/2;
const centerY=rect.height/2;

const rotateX=((y-centerY)/centerY)*-12;
const rotateY=((x-centerX)/centerX)*12;

item.style.transform=
`rotateX(${rotateX}deg)
 rotateY(${rotateY}deg)
 scale(1.03)`;
});

card.addEventListener('mouseleave',()=>{
item.style.transform='rotateX(0) rotateY(0) scale(1)';
});

});
</script>