JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<div class="cube"> 
  <div class="item item1">Skill<span><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="text-indigo-500 w-12 h-12 mb-3 inline-block" viewBox="0 0 24 24">
    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
  </svg></span></div>
  <div class="item item2">Level up</div>
  <div class="item item3">Files</div>
  <div class="item item4">Places</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
</div>

CSS

*{
  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);}

JavaScript

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