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