html - 使用 CSS Rotate 属性为元素设置动画

Question

我一直在寻找与 https://www.google.com/events/io/logistics 类似的效果(灵感) 然而这 4 个元素没有正确呈现，一个元素跳过下一个元素。我已经尝试了几次迭代都无济于事。您可以在这个 Fiddle 中看到一侧跳过另一侧。为了更清楚地看到这一点，我改变了视角。

http://jsfiddle.net/368Rc/ (更新时间:7/11)

<div style="height: 300px;margin-top:40px;">
<div class="cube-wrap">
    <div class="cube depth">
        <div class="back-pane">back</div>
        <div class="left-pane">left</div>
        <div class="right-pane">right</div>
    </div>
</div>
</div>

和CSS

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

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

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

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

    @-ms-keyframes spin-vertical {
        from { ms-transform: rotateX(0); }
        to { ms-transform: rotateX(-360deg); }
    }

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


    /*************** STANDARD CUBE ***************/
    .cube-wrap {
        -webkit-perspective: 1800px;
        -webkit-perspective-origin: 0% 1000px;

        -moz-perspective: 1800px;
        -moz-perspective-origin: 0% 1000px;

        -ms-perspective: 1800px;
        -ms-perspective-origin: 0% 1000px;

        perspective: 1800px;
        perspective-origin: 0% 1000px;
    }

    .cube {
        position: relative;
        width: 152px;
        margin: 0 auto;

        -webkit-transform-style: preserve-3d;
        -webkit-animation: spin 20s infinite linear;

        -moz-transform-style: preserve-3d;
        -moz-animation: spin 20s infinite linear; 

        -ms-transform-style: preserve-3d;
        -ms-animation: spin 20s infinite linear; 

        transform-style: preserve-3d;
        animation: spin 20s infinite linear; 
    }

    .cube div {
        position: absolute;
        width: 152px;
        height: 202px;
        background: rgba(255,255,255,0.1);
        box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
        font-size: 20px;
        text-align: center;
        line-height: 200px;
        color: rgba(0,0,0,0.5);
        font-family: sans-serif;
        text-transform: uppercase;
    }

    /*************** DEPTH CUBE ***************/
    .depth div.back-pane {

        background: url("http://doggydish.com/PROJECTS/balloon-green-l.svg");

        -webkit-transform: translateZ(10px) rotateY(90deg);
        -webkit-transform-origin: 50% 50% 0;

        -moz-transform: translateZ(10px) rotateY(90deg);
        -moz-transform-origin: 50% 50% 0;

        -ms-transform: translateZ(10px) rotateY(90deg);
        -ms-transform-origin: 50% 50% 0;

        transform: translateZ(10px) rotateY(90deg);
        transform-origin: 50% 50% 0;

        left:10px;
    }
    .depth div.right-pane {
        -webkit-transform:rotateY(0deg) translateX(0px);
        -webkit-transform-origin: 50% 200% 0;

        -moz-transform:rotateY(0deg) translateX(0px);
        -moz-transform-origin: 50% 200% 0;

        -ms-transform:rotateY(0deg) translateX(0px);
        -ms-transform-origin: 50% 200% 0;

        transform:rotateY(0deg) translateX(0px);
        transform-origin: 50% 200% 0;


        background: url("http://doggydish.com/PROJECTS/balloon-blue-r.svg");
    }
    .depth div.left-pane {
        -webkit-transform:rotateY(0deg) translateX(0px);
        -webkit-transform-origin: 50% 0% 0;

        -moz-transform:rotateY(0deg) translateX(0px);
        -moz-transform-origin: 50% 0% 0;

        -ms-transform:rotateY(0deg) translateX(0px);
        -ms-transform-origin: 50% 0% 0;

        transform:rotateY(0deg) translateX(0px);
        transform-origin: 50% 0% 0;


        background: url("http://doggydish.com/PROJECTS/balloon-blue-l.svg");
    }

    .depth div.front-pane {

        background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");

        -webkit-transform: translateZ(100px);
        -moz-transform: translateZ(100px);
        -ms-transform: translateZ(100px);
        transform: translateZ(100px);


    }

注意:我在 Firefox/Chrome 上测试，SAFARI 上可能有问题。

Answer 1

目前 chrome 不支持 transform 的标准属性。

因此您需要使用前缀来支持您所有的浏览器，即使是在关键帧中也是如此。

我已经更新了你的一个关键帧，以展示它是如何工作的，所以根据需要修复其他关键帧。

DEMO FIDDLE

.balloon-cage2 {
    display:block;
    position:relative;
    left:400px;
}
.balloon-green-r {
    background: url("http://doggydish.com/PROJECTS/balloon-green-r.svg");
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
    width: 152px;
    height: 202px;
    text-align: right;
     -webkit-animation: rotateyr 6s linear infinite;
    -moz-animation: rotateyr 6s linear infinite;
    animation: rotateyr 6s linear infinite;
    margin: 0 auto;
    position: absolute;
    background-color:#1abc9c;
}
.balloon-green-l {
    background: url(http://doggydish.com/PROJECTS/balloon-green-l.svg);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
    width: 152px;
    height: 202px;
    text-align: left;
    -webkit-animation: rotateyl 6s linear infinite;
    -moz-animation: rotateyl 6s linear infinite;
    animation: rotateyl 6s linear infinite;
    margin: 0 auto;
    position: absolute;
}
.balloon-blue-l {
    background: url(http://doggydish.com/PROJECTS/balloon-blue-l.svg);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
    width: 152px;
    height: 202px;
    text-align: left;
    -webkit-animation: rotateyl2 6s linear infinite;
    -moz-animation: rotateyl2 6s linear infinite;
    animation: rotateyl2 6s linear infinite;
    margin: 0 auto;
    position: absolute;
}
.balloon-blue-r {
    background: url(http://doggydish.com/PROJECTS/balloon-blue-r.svg);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: default;
    width: 152px;
    height: 202px;
    text-align: right;
    -webkit-animation: rotateyr2 6s linear infinite;
    -moz-animation: rotateyr2 6s linear infinite;
    animation: rotateyr2 6s linear infinite;
    margin: 0 auto;
    position: absolute;
}

@-webkit-keyframes rotateyr {
    0% {
        -webkit-transform: rotateY(0deg);
        -webkit-transform-origin: 50% 0% 0;
    }
    100% {
        -webkit-transform: rotateY(360deg);
        -webkit-transform-origin: 50% 0% 0;
    }
}
@keyframes rotateyr {
    0% {
        transform: rotateY(0deg);
        transform-origin: 50% 0% 0;
    }
    100% {
        transform: rotateY(360deg);
        transform-origin: 50% 0% 0;
    }
}
@keyframes rotateyr2 {
    0% {
        transform: rotateY(90deg);
        transform-origin: 50% 0 0;
    }
    100% {
        transform: rotateY(450deg);
        transform-origin: 50% 0% 0;
    }
}
@keyframes rotateyl {
    0% {
        transform: rotateY(0deg);
        transform-origin: 50% 0 0;
    }
    100% {
        transform: rotateY(360deg);
        transform-origin: 50% 0 0;
    }
}
@keyframes rotateyl2 {
    0% {
        transform: rotateY(90deg);
        transform-origin: 50% 0 0;
    }
    100% {
        transform: rotateY(450deg);
        transform-origin: 50% 0 0;
    }
}