JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.3/TweenMax.min.js"></script>
<main>
  <article>
    <div></div>
  </article>
  <article>
    <div></div>
  </article>
  <article>
    <div></div>
  </article>
  <article>
    <div></div>
  </article>
</main>

CSS

main{
  display: block;
  margin: 0 auto;
  width: 100%; 
  max-width: 800px;
  text-align: center;
}
article{
  width: 45%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: 15px;
  height: 200px;
  background: crimson;
  position: relative;
  box-shadow: #000 0px 0px 13px -3px;
  transform-style: preserve-3d;
}
article div{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: white;
  margin: -40px 0 0 -40px;
  box-shadow: #000 0px 0px 13px -3px;
}

JavaScript

$(function(){
	
  var $window = $('article'),
      $body = $('article');
  
  $('article').on('mousemove', function (event) {
  
    cx = Math.ceil($body.width() / 2.0);
    cy = Math.ceil($body.height() / 2.0);
    dx = event.pageX - cx;
    dy = event.pageY - cy;
    tiltx = (dy / cy);
    tilty = -(dx / cx);
    radius = Math.sqrt(Math.pow(tiltx, 2) + Math.pow(tilty, 2));
    degree = (radius * 10);
  
    TweenMax.set("article", {
      z: '0px',
      transform: 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'
    });

    TweenMax.set("article div", {
      z: '120px',
    });
  }).trigger('loaded');
    if (event.name = 'loaded') {
        TweenMax.set("article", {
            transform: 'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)'
        });
    }
})