CSS Cube는 변환 후 초기 상태로 되돌아갑니다.

.wrap {
     -webkit-perspective: 800px;
        perspective: 800px;
        -webkit-perspective-origin: 50% 100px;
        perspective-origin: 50% 100px;
        float:left;
        margin-right: 3.5px;
        -webkit-transition: 1s ease-in-out;
        -moz-transition: 1s ease-in-out;
        -o-transition: 1s ease-in-out;    
    }

    .cube {
        position: relative;
        width: 80px;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        margin: 0 auto;
        margin-top: 30px;        
       

    }

    .cube div {
        position: absolute;
        width: 50px;
        height: 50px;
    }

    .back {
        transform: translateZ(0px) rotateY(180deg);
        background: #057e98;
        opacity: 0.8;
    }
    .right {
        transform: rotateY(-270deg) translateX(0px);
        transform-origin: top right;
        background: #16a8b8;
        opacity: 0.8;
    }
    .left {
        transform: rotateY(270deg) translateX(0px);
        transform-origin: center left;
        background: #c25e28;
        opacity: 0.8;
    }
    .top {
        transform: rotateX(-90deg) translateY(-50px);
        -webkit-transform-origin: top center;
        transform-origin: top center;
        background: #c25e28;
        opacity: 0.8;
    }
    .bottom {
        transform: rotateX(90deg) translateY(0px);
        transform-origin: bottom center;
        background: blue;
        opacity: 0.8;
    }
    .front {
        transform: translateZ(50px);
        background: #f47a2d;
        opacity: 0.8;
    }

    @-webkit-keyframes spin {
        from { -webkit-transform: rotateY(0); -webkit-transform-origin: 20% 50% 0; }
        to { -webkit-transform: rotateY(360deg); -webkit-transform-origin: 20% 50% 0;}
    } 

@keyframes spin {
        from { transform: rotateY(0); transform-origin: 20% 50% 0; }
        to { transform: rotateY(360deg); transform-origin: 20% 50% 0;}
    } 

    .cube:hover {  
     -webkit-animation: spin 3s infinite linear;
        animation: spin 3s infinite linear;
        -webkit-animation-play-state: running;
        animation-play-state: running;
    }

    .wrap:hover{
        -webkit-transform: translate(3em,5em);
      transform: translate(3em,5em);
    }

<div class="wrap">
   <div class="cube text-center">
      <div class="front">
      </div>
      <div class="back">
      </div>
      <div class="top">
      </div>
      <!--<div class="bottom"> 
      </div>-->
      <div class="left">
      </div>
      <div class="right">
      </div>
  </div>
</div>

<div class="wrap">
   <div class="cube text-center">
      <div class="front">
      </div>
      <div class="back">
      </div>
      <div class="top">
      </div>
      <!--<div class="bottom"> 
      </div>-->
      <div class="left">
      </div>
      <div class="right">
      </div>
  </div>
</div>