<div id="wrapper">
    <div id="shape">
        <div class="plane p1">
          H
      </div>
        <div class="plane p2">
          E
      
      </div>
        <div class="plane p3">
      H
      </div>
        <div class="plane p4">
     E
      </div> 
        <div class="plane p5">
     H
      </div>
        <div class="plane p6">
      E
      </div>
        <div class="plane p7">
      H
      </div>
        <div class="plane p8">
      H
      </div>
      
        <div class="plane p9">R</div>
    </div>
</div>

body {
  background:#EEE;
  margin:0;
  padding:0;
    
}
#shape .lol { height:200px; width:200px;}

.paused{
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform:rotateY(0);

  
  }
  to {-webkit-transform:rotateY(-360deg);

  }
}

@-moz-keyframes spin {
    from {

    -moz-transform:rotateY(0);
  
  }
  to {
      -moz-transform:rotateY(-360deg);
  }
  
}

#wrapper{
    width:600;
    margin:0 auto;
    -webkit-perspective: 800;
    margin:150px auto 0 auto;
    -webkit-perspective-origin: 50% 90px;
    -webkit-transition:-webkit-perspective,1s;
    -moz-perspective-origin: 50% 90px;
    -moz-transition:-webkit-perspective,1s;
  
}
       


#shape {
  margin:0 auto;
  height:200px;
  width:200px;
  -webkit-transform-style:preserve-3d;
  -webkit-animation: spin 8s infinite linear;
  -moz-transform-style:preserve-3d;
  -moz-animation: spin 8s infinite linear;
  
}


    
.plane {
      position:absolute;
       height:200px;
      width:200px;
      background-color:rgba(0,0,0, 0.6);
      text-align:center;
      font-size:10em;
      color:white;
      
    }

#shape > .p1 { 
  -webkit-transform:translateZ(250px); 
  -moz-transform:translateZ(250px);
  color:red;
  text-shadow 1px 1px 1px black;
}
#shape > .p2 { 
  -webkit-transform:rotateY(45deg) translateZ(250px); 
   -moz-transform:rotateY(45deg) translateZ(250px); 
}
#shape > .p3 {
  -webkit-transform: 
    rotateY(90deg) translateZ(250px);
   -moz-transform: 
    rotateY(90deg) translateZ(250px);
}
#shape > .p4 {
  -webkit-transform: rotateY(135deg) translateZ(250px);
  -moz-transform: rotateY(135deg) translateZ(250px);
}
#shape > .p5 { 
  -webkit-transform:rotateY(180deg) translateZ(250px);
  -moz-transform:rotateY(180deg) translateZ(250px);
  color:red;
  text-shadow 1px 1px 1px black;
}
#shape > .p6 { 
  -webkit-transform:rotateY(225deg)
    translateZ(250px);
  -moz-transform:rotateY(225deg)
    translateZ(250px);
}
#shape > .p7 { 
  -webkit-transform:rotateY(270deg)
    translateZ(250px);
   -moz-transform:rotateY(270deg)
    translateZ(250px);
}
#shape > .p8 {
  -webkit-transform:rotateY(315deg)
    translateZ(250px);
   -moz-transform:rotateY(315deg)
    translateZ(250px);
}



#wrapper:hover {
  -webkit-perspective-origin: 50% -250px;
  -moz-perspective-origin: 50% -250px;


};





  

$(document).ready(function() { 
$("#shape").hover(function() {
  $(this).toggleClass('paused'); //Pauses on hover
});
});