<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cube"> 
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

*{
  margin:0;
  padding:0;
}
.cube{
  width:300px;
  height:300px;
  margin:100px auto;
  position: relative;
  transform-origin:50% 50% -150px;
  transform-style:preserve-3d;
  transform:rotate3d(1,1,1,50deg);
  transition: 2s linear;
}

.item{
  width:inherit;
  height:inherit;
  position: absolute;
  border:6px solid #ccc;
  border-radius:10px;
  line-height:300px;
  text-align:center;
  font-size:3em;
  background:rgba(0,0,0,.3);
  color:#fbfbfb;
  transform-origin:50% 50% -150px;
}

.item2{transform:rotateY(90deg);}
.item3{transform:rotateY(-90deg);}
.item4{transform:rotateX(90deg);}
.item5{transform:rotateX(-90deg);}
.item6{transform:rotateY(180deg);}

$(function(){
  $(document).mousemove(function(e){
    $(".cube").css({
     'transform':'rotateX('+e.pageY+'deg)rotateY('+e.pageX+'deg)'
    })
  })
})