Question

我以某种方式设法创造了这个。我创建了一个水平旋转的立方体，当它悬停时，我希望它在没有悬停时保持在当前位置。我现在已经搜索了一段时间，但我似乎无法找到答案。

<html>
<style>
    .wrap {
        -moz-perspective: 800px;
        -webkit-perspective: 800px;
        perspective: 800px;
        -moz-perspective-origin: 50% 100px;
        -webkit-perspective-origin: 50% 100px;
        perspective-origin: 50% 100px;
    }

    .cube {
        position: relative;
        width: 200px;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        margin: 0 auto;
        margin-top: 30px;
    }

    .cube div {
        position: absolute;
        width: 200px;
        height: 200px;
    }

    .back {
        -webkit-transform: translateZ(-100px) rotateY(180deg);
        -moz-transform: translateZ(-100px) rotateY(180deg);
        background: orange;
        opacity: 0.5;
    }
    .right {
        -webkit-transform: rotateY(-270deg) translateX(100px);
        -moz-transform: rotateY(-270deg) translateX(100px);
        -webkit-transform-origin: top right;
        -moz-transform-origin: top right;
        background: yellow;
        opacity: 0.5;
    }
    .left {
        -webkit-transform: rotateY(270deg) translateX(-100px);
        -moz-transform: rotateY(270deg) translateX(-100px);
        -webkit-transform-origin: center left;
        -moz-transform-origin: center left;
        background: violet;
        opacity: 0.5;
    }
    .top {
        -moz-transform: rotateX(-90deg) translateY(-100px);
        -webkit-transform: rotateX(-90deg) translateY(-100px);
        -webkit-transform-origin: top center;
        -moz-transform-origin: top center;
        background: green;
        opacity: 0.5;
    }
    .bottom {
        -webkit-transform: rotateX(90deg) translateY(100px);
        -moz-transform: rotateX(90deg) translateY(100px);
        -webkit-transform-origin: bottom center;
        -moz-transform-origin: bottom center;
        background: blue;
        opacity: 0.5;
    }
    .front {
        -webkit-transform: translateZ(100px);
        -moz-transform: translateZ(100px);
        background: red;
        opacity: 0.5;
    }

    @-webkit-keyframes spin {
        from { -webkit-transform: rotateY(0); }
        to { -webkit-transform: rotateY(360deg); }
    }

    .cube:hover {
        animation: spin 5s infinite linear;
        -webkit-animation: spin 5s infinite linear;
        -moz-animation: spin 5s infinite linear;
    }

</style>
<body>
    <div class="wrap">
        <div class="cube">
            <div class="front">front</div>
            <div class="back">back</div>
            <div class="top">top</div>
            <div class="bottom">bottom</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div
</body>
</html>

Anynone可以指出我正确的方向吗？非常感谢你，

Answer 1

您可以为.cube的所有状态设置动画，并在悬停时切换animation-play-state（请参阅JSFiddle）：

   .cube {
        /* other styles... */
        -webkit-animation: spin 5s infinite linear;
        animation: spin 5s infinite linear;
        -webkit-animation-play-state: paused;
        animation-play-state: paused;
    }

    /* other rules... */

    .cube:hover {        
        -webkit-animation-play-state: running;
        animation-play-state: running;
    }

另外，我认为现在没有太多需要为变换和动画指定-moz - 属性，因为自16版以来Firefox支持它们没有前缀（它的版本是7个版本！）。

Answer 2

以下CSS会在mouse hover的情况下调用，因为在此内没有旋转动画，它不会触发任何动画

.cube : hover {
   //Do nothing
   }

鼠标悬停时停止立方体旋转

2 个答案: