JQuery rotate two side back forth on hover (3D)

Question

I have two side front and back. By default front is displayed, when I hover over it it display the back(ie the other side). The problem is that it returns to front by itself, what i wanted to do is unless I hover over it I want the back side to remain as it is.(Rotate back fort on hover)

Here is a live example:

 $(document).ready(function(){ $(".cube").mouseover(function(){ $(".cube").addClass('spin-cube'); }); $(".cube").mouseout(function(){ $(".cube").removeClass('spin-cube'); }); }); 

  .wrap { width: 100%; height: 300px; padding-top:50px; clear: both; perspective: 800px; perspective-origin: 50% 100px; } .cube { position: relative; width: 200px; transform-style: preserve-3d; margin: 0 auto; } .cube div { position: absolute; width: 200px; height: 200px; } .left { background-color: #FFC250; transform: rotateY(270deg) translateX(-100px); transform-origin: center left; } .front { background-color: #360; z-index: 1000; transform: translateZ(100px); } @keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(90deg); } } .spin-cube { animation: spin 2s linear; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="cube"> <div class="front">front</div> <div class="left">left</div> </div> </div> 

Answer 1

This solves the problem

  $(".cube").mouseover(function(){
        if($(".cube").hasClass("spin-cube-front")){
            $(".cube").addClass('spin-cube-back');
            $(".cube").removeClass('spin-cube-front');
        }else{
            $(".cube").removeClass('spin-cube-back');
            $(".cube").addClass('spin-cube-front');
        }
    });

Answer 2

This would be more easily done using a transition instead of an animation. Here is an example:

 $(document).ready(function(){ var isClassy = false; var cooldown = false; $(".cube").mouseover(function(){ if (cooldown) return; if (!isClassy) { $(".cube").addClass('spin-cube'); isClassy = true; } else { $(".cube").removeClass('spin-cube'); isClassy = false; } cooldown = true; setTimeout(function() {cooldown = false;}, 500); }); }); 

 .wrap { width: 100%; height: 300px; padding-top:50px; clear: both; perspective: 800px; perspective-origin: 50% 100px; } .cube { position: relative; width: 200px; transform-style: preserve-3d; margin: 0 auto; transition: all 1s ease; transform: rotateY(0deg); } .cube div { position: absolute; width: 200px; height: 200px; } .left { background-color: #FFC250; transform: rotateY(270deg) translateX(-100px); transform-origin: center left; } .front { background-color: #360; z-index: 1000; transform: translateZ(100px); } .spin-cube { transform: rotateY(90deg); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="cube"> <div class="front">front</div> <div class="left">left</div> </div> </div> 

Answer 3

$(document).ready(function(){
     $(".cube").mouseover(function(){
        $(".cube").addClass('spin-cube');
    });
    $(".cube").mouseout(function(){
        $(".cube").removeClass('spin-cube');
    });
});


.wrap {
        width: 100%;
        height: 300px;
        padding-top:50px;
        clear: both;
        perspective: 800px;
        perspective-origin: 50% 100px;
    }
    .cube {
        position: relative;
        width: 200px;
        transform-style: preserve-3d;
        margin: 0 auto;
        transition: transform 1s ease;
    }
    .cube div {
        position: absolute;
        width: 200px;
        height: 200px;
    }
    .left {
        background-color: #FFC250;
        transform: rotateY(270deg) translateX(-100px);
        transform-origin: center left;
    }
    .front {
        background-color: #360;
        z-index: 1000;
        transform: translateZ(100px);
    }

    .spin-cube {
        transform: rotateY(90deg);
    }