JSFiddle - React, Tailwind, and code Playground

by dimshik

HTML

<!--<div class="coordinate">
  <h3>Watch on mobile</h3>
  <ul>
    <li>X beta : <span id="pos-x"></span></li>
    <li>Y gamma : <span id="pos-y"></span></li>
    <li>Z alpha : <span id="pos-z"></span></li>
  </ul>
</div>
-->


 <p>Lorem ipsum dolor sit amet, sea habeo assum rationibus ea, est paulo iriure suscipiantur ne. Esse tota ea nam. Ne deleniti mediocrem has, et duo case aeque apeirian. Ad mel nisl vidisse. Iisque philosophia ne mei, natum nusquam albucius ad sit.
    </p>
    <p>
        Vel ei aliquip equidem. Cu natum iuvaret quo. Pro enim latine habemus et, ea velit tamquam scripserit mei. No mei quas aeque erroribus. Et usu novum similique. Simul eligendi ne pro.
    </p>

        <p>
        Eos tota scripserit ex. No elitr quaeque oportere est, cum quis efficiendi ad. Cu usu eros probatus singulis, ei vel mundi voluptua lobortis. An pro aliquam dolorum, no idque omittantur duo. Eros brute dolore nec in. Mei audire aliquam delicatissimi te, tation posidonium at per, sed cu viris graeci assentior.
    </p>
    
        <p>
        Vel ei aliquip equidem. Cu natum iuvaret quo. Pro enim latine habemus et, ea velit tamquam scripserit mei. No mei quas aeque erroribus. Et usu novum similique. Simul eligendi ne pro.
    </p>
        <p>
        Eos tota scripserit ex. No elitr quaeque oportere est, cum quis efficiendi ad. Cu usu eros probatus singulis, ei vel mundi voluptua lobortis. An pro aliquam dolorum, no idque omittantur duo. Eros brute dolore nec in. Mei audire aliquam delicatissimi te, tation posidonium at per, sed cu viris graeci assentior.
    </p>
    <p>
        Eos tota scripserit ex. No elitr quaeque oportere est, cum quis efficiendi ad. Cu usu eros probatus singulis, ei vel mundi voluptua lobortis. An pro aliquam dolorum, no idque omittantur duo. Eros brute dolore nec in. Mei audire aliquam delicatissimi te, tation posidonium at per, sed cu viris graeci assentior.
    </p>


<div class="card-wrapper">
  <div id="card-1" class="card">

 ...

CSS

ul {
  list-style-type : none;
  padding : 0 10px;
}

.coordinate {
  position : fixed;
  color : #A6B9C0;
  bottom : 0;
  left : 10px;
  perspective:800px;
}

.card-wrapper {
  position: relative;
  width : 300px;
  height : 250px;
left:50%;

    margin:30px 0 45px -150px;
    
  perspective : 400px;
}

.card {
  width : 100%;
  height: 100%;
  border : 2px solid #011627;
  transform-style: preserve-3d;
  backface-visibility: hidden;
    border-radius: 5px;
    box-shadow: 0 45px 50px rgba(0, 0, 0, 0.4);
    
    background-image: url('http://www.ncbl.org.my/wp-content/uploads/2014/04/advertising300x250-1.gif');
    background-repeat:no-repeat;
}

JavaScript

var posX = document.getElementById("pos-x"),
    posY = document.getElementById("pos-y"),
    posZ = document.getElementById("pos-z"),
    card = document.getElementById("card-1")
;

window.addEventListener('deviceorientation', function(event) {
  //posX.innerHTML = event.beta;
  //posY.innerHTML = event.gamma;
  //posZ.innerHTML = event.alpha;
  rotateElement(55-event.beta,event.gamma);
  
});

window.addEventListener('mousemove', function(e) {
  rotateElement(-((45 * (e.y - window.innerHeight/2)) / window.innerHeight/2),
                (45 * (e.x - window.innerWidth/2)) / window.innerWidth/2);
});

function rotateElement(x,y){
    
    x = (x > 20)? 20: x;
    y = (y > 20)? 20: y;
    
  card.style.transform = "rotateX("+x+"deg) rotateY("+y+"deg)";
  card.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)";
}
document.getElementsByTagName('head')[0].innerHTML += '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />';