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.