JSFiddle - React, Tailwind, and code Playground

by kougiland

CSS

body{
  position:absolute;
  background-color:black;  
  width:100%;
  height:100%;
}

ul{
  margin:50px auto;
  padding:0;  
  -webkit-transform-style: preserve-3d;
  -webkit-perspective-origin:50% 50%;
      -webkit-perspective:800px;
  width:300px;
  height:400px;
  position:relative;
}
li{
  width:300px;
  height:400px;
  background:red;
  position:absolute;
  top:0;
  left:0;
  -webkit-transition: 300ms all ease-in-out; 
}

JavaScript

var $body = $('body'),
    $ul = $('<ul>'),
    $li = $('<li>'),
    lines = 1;

for (var i = 0; i < lines; i++) {
  $li.appendTo($ul);
}  

$ul.appendTo($body);

$('ul').on('mousemove', function(e){
  var x = e.pageX/90,
      y = parseInt(e.pageY/90);
      //y = parseInt(e.pageY/100);
    console.log("x"+x+"y"+y)
$("li").css({'-webkit-transform' :'rotateY('+ y+'deg) rotateX( -'+x+'deg)'});
});