JSFiddle - React, Tailwind, and code Playground

by TrySpace

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<article data-grid="container" id="one">
  <section  id="home" style="height: 366px; width: 366px; position: relative; transform-style: preserve-3d; transform-origin: 22% 49% 0px; transform: rotateY(380deg) rotateX(320deg);">
    <a href="#" style="background-color: rgb(255, 255, 0);">
      <header title="Home" style="position: absolute; background-color: rgba(111, 111, 111, 0.7); top: 0px; left: 33%; right: 33%; overflow: hidden; font-size: 1.3em; width: 33%; height: 33%; transform: translateY(21px) translate(0px, 33%) rotate3d(1, 0, 0, 90deg);">Home</header>
      <br>
        <img width="100%" src="/favicon.ico" title="/favicon.ico" style="position: absolute; top: 33%; left: 33%; right: 0%; width: 33%; height: 33%; background-color: rgba(0, 0, 0, 0.7); transform: translateZ(60px);"></a><article style="background-color: rgba(0, 0, 0, 0.7); position: absolute; top: 66%; left: 33%; right: 33%; overflow: hidden; font-size: 0.8em; width: 33%; height: 33%; transform: translateY(-21px) translate(0px, -33%) rotate3d(1, 0, 0, -90deg);">Home is where the &lt;3 is.</article>
        <aside style="position: absolute; background-color: rgba(111, 111, 111, 0.7); top: 33%; left: 66%; right: 0%; overflow: hidden; font-size: 0.8em; width: 33%; height: 33%; transform: translateX(-21px) translate(-33%, 0px) rotate3d(0, 1, 0, 90deg);">logo, info</aside>
        <aside style="position: absolute; background-color: rgba(111, 111, 111, 0.7); top: 33%; left: 0%; right: 0%; overflow: hidden; font-size: 0.8em; width: 33%; height: 33%; transform: translateX(21px) translate(33%, 0px) rotate3d(0, 1, 0, -90deg);">1</aside>
      </section>
    </article>

CSS

article
{

		-webkit-perspective: 300px;
           -moz-perspective: 300px;
             -o-perspective: 300px;
                perspective: 300px;

}

JavaScript

mousePerspective($(window).width(), $(window).height());

function mousePerspective(w, h)
{
$(document).mousemove(function(e){
     var Xmouse = e.pageX;
     var Ymouse = e.pageY;
	 
	 //calc perc
	 var Xperc = Xmouse / w;
	 var Yperc = Ymouse / h;
	 Xpos = Math.floor(Xperc * 100);
	 Ypos = Math.floor(Yperc * 100);
	 console.info("X Axis : " + Xpos + " Y Axis : " + Ypos);
	 Xrev = 100 - Xpos;
	 Yrev = 100 - Ypos;

	 $("section").css({ transformOrigin: Xpos+'% '+Ypos+'%' });
	

;
	 
	  });

}