JQuery在悬停时旋转两侧（3D）

我有两个侧面正面和背面。默认情况下显示前面，当我将鼠标悬停在它上面时，它会显示背面（即另一面）。问题是它自己回到前面，我想要做的是除非我把鼠标悬停在它上面，我希望背面保持原样（旋转堡垒悬停）JQuery在悬停时旋转两侧（3D）

这是一个现场示例：

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

来源

2015-08-08 Puni

您的代码和小提琴不匹配，和你的问题/意图是不明确的。请更正你的问题 – Amit

对不起，我正在试验，我搞砸了一点，但现在我已经更新 – Puni

这解决了问题

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

来源

2015-08-09 17:06:15 Puni

这将使用过渡，而不是一个动画更容易完成。这里有一个例子：

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

来源

2015-08-08 20:06:35

虽然没有理由使用Javascript/jQuery。一个简单的：悬停伪选择器可以正常工作。 – Damien

@Damien据推测，OP正在使用JavaScript，因为他希望能够扩展功能或将其集成到现有项目中。我尝试使用问题中使用的相同技术来给出示例 - 修复示例而不是完全重写它们。 –

好吧，这是好的，但我希望后面保持原样，除非我将光标移出并再次悬停。即当我第一次悬停时，它会转向左侧，当我再次悬停时，它会转向前方。你能得到伊姆的话吗？ – Puni

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

来源

2015-08-08 20:10:21 user5206903

我想要更多，请阅读我的评论下面 – Puni

JQuery在悬停时旋转两侧（3D）

回答

相关问题