Анимация продавливания плитки в стиле Windows 8

let limit = a => Math.sign(a) * Math.min(15, Math.abs(a)); 
 
let imgs = [...document.querySelectorAll('img')].map(img => { 
 
  let container = document.createElement('div'); 
  container.classList.add('card-3d'); 
  img.parentNode.insertBefore(container, img); 
  container.append(img); 
  let reqId, tx = 0, ty = 0, x = 0, y = 0; 
 
  function upd() { 
      animate(); 
      x += (tx - x)/9; 
      y += (ty - y)/9; 
      img.style.transform = `rotatex(${-y}deg) rotatey(${x}deg)`; 
      img.style.boxShadow = `${-x/4}px ${-y/4}px 5px 0 #0006`; 
  } 
   
  function animate() { 
      if (Math.abs(tx - x) > 0.01 && Math.abs(ty - y) > 0.01) 
        reqId = requestAnimationFrame(upd); 
  } 
   
  return function(x, y) { 
      tx = ty = 0;  
      let r = container.getBoundingClientRect(); 
      if (r.x < x && r.y < y && r.x + r.width > x && r.y + r.height > y) { 
          tx = limit((x - r.x - r.width/2)/4); 
          ty = limit((y - r.y - r.height/2)/3); 
      }  
      cancelAnimationFrame(reqId); 
      animate(); 
  } 
}); 
 
addEventListener('mousemove', e => imgs.forEach(i => i(e.x, e.y)));

.card-3d { 
    perspective: 1000px; 
    padding: 5px; 
    display: inline-block; 
}

<img src="https://picsum.photos/id/44/200/150" > 
<img src="https://picsum.photos/id/45/200/150" > 
<img src="https://picsum.photos/id/46/200/150" > 
<img src="https://picsum.photos/id/47/200/150" ><br> 
<img src="https://picsum.photos/id/48/415/305" > 
<img src="https://picsum.photos/id/49/415/305" ><br> 
<img src="https://picsum.photos/id/43/415/305" > 
<img src="https://picsum.photos/id/42/415/305" >

var wrapper = document.querySelector('.box-wrapper') 
var box = document.querySelector('.box') 
var wrapperRect, elementLeftPlusElementHalfWidth, elementLeftPlusElementHalfHeight, 
    elementLeft, elementRight, elementTop, elementBottom, x, y 
 
init() 
 
wrapper.addEventListener('mousemove', mouseMoveHandler) 
wrapper.addEventListener('mouseleave', mouseleaveHandler) 
 
function mouseMoveHandler({ 
  pageX, 
  pageY 
}) { 
  if (pageX > elementLeft && pageX < elementRight) 
    x = (pageX - elementLeftPlusElementHalfWidth) * 0.04 
 
  if (pageY > elementTop && pageY < elementBottom) 
    y = -(pageY - elementLeftPlusElementHalfHeight) * 0.04 
 
  box.style.transform = `rotateX(${Math.round(y)}deg) rotateY(${Math.round(x)}deg)` 
} 
 
function mouseleaveHandler() { 
  box.style.transform = 'rotateX(0) rotateY(0)' 
} 
 
function init() { 
  wrapperRect = wrapper.getBoundingClientRect(); 
  ({ 
    left: elementLeft, 
    right: elementRight, 
    top: elementTop, 
    bottom: elementBottom 
  } = wrapperRect) 
 
  elementLeftPlusElementHalfWidth = elementLeft + wrapperRect.width / 2 
  elementLeftPlusElementHalfHeight = elementTop + wrapperRect.height / 2 
} 
 
addEventListener('resize', () => init())

body { 
  margin: 0; 
  height: 100vh; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  perspective: 1000px; 
  background-color: #38404e; 
  overflow: hidden; 
} 
 
.box-wrapper { 
  padding: 1.3rem; 
} 
 
.box { 
  width: 490px; 
  height: 390px; 
  background-color: #465162; 
  box-shadow: 10px 10px 0px -2px rgba(0, 0, 0, 0.35); 
  transition: 0.2s linear; 
} 
 
.box__cover { 
  background-image: url('https://www.pixijs.com/wp/wp-content/uploads/HeinekenGoplaces-540x312.jpg'); 
  height: 75%; 
  width: 100%; 
} 
 
.box__footer { 
  height: 25%; 
  padding-left: 2rem; 
  display: grid; 
  grid-gap: 0.5rem; 
  align-content: center; 
  color: white; 
  font-family: sans-serif; 
} 
 
.text-2 { 
  color: #BDBDBD; 
}

<div class="box-wrapper"> 
  <div class="box"> 
    <div class="box__cover"></div> 
    <footer class="box__footer"> 
      <div class="text-1 ">Heineken Go Places</div> 
      <div class="text-2">Cloud Factory</div> 
    </footer> 
  </div> 
</div>