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

Question

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

这是一个实例：

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

使用转换而不是动画可以更轻松地完成此操作。这是一个例子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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