JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

<div class="cube box3 rotateLeft">
  <div class="pane1"></div>
  <div class="pane2"></div>
  <div class="pane3"></div>
  <div class="pane4"></div>
  <div class="pane5"></div>
  <div class="pane6"></div>
</div>

CSS

.cube div {
  width: 120px;
  height: 120px;
  -moz-transition: all 400ms ease;  
  position: absolute;
}
.box1 div { left: 75px; top: 50px; }
.box2 div { left: 300px; top: 50px; }
.box3 div { left: 525px; top: 50px; border: 1px solid rgba(0,0,0,1); background: rgba(187,187,187,.5); }
.box4 div { left: 750px; top: 50px; border: 1px solid rgba(0,0,0,1); background: rgba(187,187,187,.5); }
.box5 div {
  left: 75px;
  top: 300px;
  background: url(crate_side.png);
  background-size: 100%;
  border: 1px solid #000000;
}
.box6 div {
  left: 300px;
  top: 300px;
  background: url(crate_side.png);
  background-size: 100%;
  border: 1px solid #000000;
}

.pane1 {
   background: #BBB;   
   -moz-transform: scaley(.49) rotate(50deg);
   z-index: 6;
}
.pane2 {
   background: #AAA;  
   -moz-transform: translate(-38%, 65.5%) scalex(.65) skew(0deg, 21deg);
   z-index: 5;
}
.pane3 {
   background: #DDD;   
   -moz-transform: translate(32%, 68%) scalex(.77) skew(0deg, -17.5deg);
   z-index: 4;
}
.pane4 {  
   -moz-transform: translate(38%, 34%) scalex(.65) skew(0deg, 21deg);
   z-index: 3;
}
.pane5 {   
   -moz-transform: translate(-32%, 31%) scalex(.77) skew(0deg, -17.5deg);
   z-index: 2;
}
.pane6 {
   -moz-transform: translate(0%, 100%) scaley(.49) rotate(50deg);
   z-index: 1;
}

.rotateLeft:hover .pane1 { -moz-transform: scaley(.495) rotate(75deg); }
.rotateLeft:hover .pane2 { -moz-transform: translate(-48%, 56%) scalex(.25) skew(0deg, 25deg); }
.rotateLeft:hover .pane3 { -moz-transform: translate(13%, 73.5%) scalex(.98) skew(0deg, -7.5deg); }
.rotateLeft:hover .pane4 { -moz-transform: translate(49%, 45%) scalex(.25) skew(0deg, 25.5deg); }
.rotateLeft:hover .pane5 { -moz-transform: translate(-13%, 26.5%) scalex(.98) skew(0deg, -7.5deg); }
.rotateLeft:hover .pane6 { -moz-transform: translate(0%, 100%) scaley(.49) rotate(75deg); }

.rotateRight:hover .pane1 { -moz-transform: scaley(.49) rotate(15deg); }
.rotateRight:hover .pane2 { -moz-transform: translate(-13%, 73.5%)...