JQuery вращать две стороны назад вперед при наведении (3D)

Question

У меня есть две стороны спереди и сзади. По умолчанию отображается фронт, когда я нависаю над ним, он показывает обратную сторону (то есть другую сторону). Проблема в том, что он возвращается на передний план сам по себе, что я хотел бы сделать, если я не нависну над ним, я хочу, чтобы задняя сторона осталась такой, как есть. (Поворот назад форта на зависании)

Вот живой пример:

$(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

Это решает проблему

$(".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

Это было бы легко сделать с помощью перехода вместо анимации. Вот пример:

$(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); 
    }