JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<script src="https://ricostacruz.com/jquery.transit/jquery.transit.js?v=14845"></script>
<div>
Test test test
</div>

CSS

div {
  width: 300px;
  height: 180px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(to bottom, #00F 0%,rgba(0,0,0,0) 33%), linear-gradient(to bottom, rgba(0,0,0,0) 66%,#00F  100%), linear-gradient(to left, #ff0000 0%,rgba(0,0,0,0) 33%),linear-gradient(to right, #ff0000 0%,rgba(0,0,0,0) 33%);
  color: #FFF;
  font: 30px/180px Verdana,sans-serif;
  margin: 30px;
}

JavaScript

$('div').on('click', pitch);

function pitch(e) {
 var bound = $(this)[0].getBoundingClientRect(); 
console.log(e)

 var deg = 30;

 var pitch_y = 0;
 var pitch_x = 0;
 console.log('Click: ' + e.offsetX + ' ' + e.offsetY);

 if (e.offsetX < e.target.scrollWidth / 3) {
    pitch_y = -1;
 } else if (e.offsetX > (2* e.target.scrollWidth / 3)) {
    pitch_y = 1;
 }

 if (e.offsetY < e.target.scrollHeight / 3) {
    pitch_x = -1;
 } else if (e.offsetY > (2* e.target.scrollHeight / 3)) {
    pitch_x = 1;
 }
 $(this).text(pitch_x + ' ' + pitch_y);

 $(this).transition({
    rotate3d: pitch_x + ', ' + pitch_y + ', 0, ' + deg + 'deg'
 });
}