0

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

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

任何人都可以指出我正确的方向吗？非常感谢您，

4

2 回答 2

1

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

   .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为变换和动画指定 -properties，因为 Firefox 从版本 16 开始就支持它们无前缀（它是 7 个版本！）。

于 2013-08-21T14:20:00.487 回答
0

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

.cube : hover {
   //Do nothing
   }
于 2013-08-21T11:43:27.640 回答