CSS Cube reverts back to its initial state after transform

Question

I'm no expert in css and I have followed different tutorial sources in order to create a rotating cube on hovering using css and html.

On hover, the cube translate and rotates. However, when it is no longer active, I would like the cube to return to this original position. How can this be achieved?

Here is the code.

HTML

.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;
  -webkit-animation: spin 3s infinite linear;
  animation: spin 3s infinite linear;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.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;
  }
}
.cube:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.wrap:hover {
  -webkit-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>

The problem is when the cube stops rotating, it keeps its current state. I would like it to revert back to its original position and state. That is, if it stopped rotating with the 'right' side showing, it should return to its original position with the 'front' side showing.

Something like [this?](http://jsfiddle.net/jbutler483/L615cabk/) — jbutler483, Apr 23 '15 at 11:51
@jbutler483 Yeah. Although it would be great if there was a smooth transition from the current state to the initial state. Is this possible? — mokko211, Apr 23 '15 at 11:54
not easily. But I think a recent question was posted about that... i'll see if I can dig it up for you. Something like [this](http://jsfiddle.net/u7vXT/) which ended up using an extra class and javascript — jbutler483, Apr 23 '15 at 11:56
@jbutler483 Thanks. I'll see if I can transpose it to my scenario. Appreciate the help. — mokko211, Apr 23 '15 at 12:02

score 2 · Accepted Answer · answered Apr 23 '15 at 11:58

I think you need like following. You have to apply following css:

It is because you paused your animation animation-play-state: paused; when not hover so it will stop animating.

.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>

Hope it helps.

Yeah. It is one solution but it would have been great if there was a smooth transition from the current state to the initial state. — mokko211, Apr 23 '15 at 12:03
@mokko211: Transition (instead of animation) would cause a smooth transition back to the original state but I am afraid it won't be useful for you because you need an infinite loop. With animation a reverse effect needs a reverse animation - something like in [this answer](http://stackoverflow.com/questions/19251804/continuous-rotation-on-hover-exit/19252731#19252731) of mine. But that is only if you want an exact reversal of events. If you just want it to smoothly return back, I think Ketan's second sample would be good for you. — Harry, Apr 23 '15 at 12:11
@Harry Ahhh, I see what you mean. This would require too much work for a small work. I'll stick to Ketan's answer. Thank you — mokko211, Apr 23 '15 at 12:20

score 0 · Answer 2 · answered Apr 23 '15 at 13:37

you could create a spinback animation that occurs once in non :hover state, but it would take place on page load once (before anything happens);

you could have a js listner add this animation on hover to overcome the problem... (but that's cheating)..

.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;
  -webkit-animation: spinback 3s 1 linear;
  animation: spinback 3s 1 linear;

  
}
.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;
  }
}
 @-webkit-keyframes spinback {

  from {
    -webkit-transform: rotateY(360deg);
    -webkit-transform-origin: 20% 50% 0;
  }
  to {
    -webkit-transform: rotateY(0);
    -webkit-transform-origin: 20% 50% 0;
  }
}
.cube:hover {
  -webkit-animation: spin 3s infinite linear;
  animation: spin 3s infinite linear;
}
.wrap:hover {
  -webkit-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>

CSS Cube reverts back to its initial state after transform

2 Answers2