JSFiddle - React, Tailwind, and code Playground

by Uncle Bens

HTML

<div id="parent">
  <div id="child">
  </div>
</div>

CSS

body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

#parent {
  perspective: 300px;
  border: 1px solid #ccc;
}

#child {
  transition: transform 0.1s;
  transform: rotateY(0) rotateX(0);
  width: 500px;
  height: 300px;
  background-image: url(http://beerhold.it/500/302);
}

JavaScript

ns4 = (document.layers) ? true : false
ie4 = (document.all) ? true : false

function init() {
  if (ns4) {
    document.captureEvents(Event.MOUSEMOVE);
  }
  document.onmousemove = mousemove;
}

function mousemove(event) {
  var mouse_x = 0;
  var mouse_y = 0;
  if (document.attachEvent != null) {
    mouse_x = window.event.clientX;
    mouse_y = window.event.clientY;
  } else if (!document.attachEvent && document.addEventListener) {
    mouse_x = event.clientX;
    mouse_y = event.clientY;
  }
  var offsetx = mouse_x - document.getElementById('parent').offsetLeft;
  var offsety = mouse_y - document.getElementById('parent').offsetTop;
  if (offsetx < 0) offsetx = 0;
  if (offsetx > 500) offsetx = 500;
  if (offsety < 0) offsety = 0;
  if (offsety > 300) offsety = 300;
  document.getElementById('child').style.transform = 'rotateY(' + (offsetx - 250) / 20 + 'deg) rotateX(' + (-offsety + 150) / 20 + 'deg)';

}
init()