用CSS旋转属性动画振荡元素

Question

我一直在寻找创建一个类似的效果https://www.google.com/events/io/logistics (灵感)然而4个元素没有正确渲染，一个元素跳过下一个。我已经尝试了几次，但都无济于事。你可以看到这提琴的一边跳过另一边。为了看得更清楚，我改变了视角。

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的标准属性

所以你需要使用prefix来支持所有的浏览器，甚至在关键帧中。

我已经更新了你的一个关键帧，以显示它是如何工作的，所以修复其他关键帧，因为你想。

演示小提琴

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