Animating Oscillating Elements with CSS Rotate Property - html

Question

I have been looking to create a similar effect to https://www.google.com/events/io/logistics (the inspiration) however the 4 elements are not rendering correctly, one element jumps over the next. I have tried several iterations of this with no avail. You can see in this Fiddle one side jumps over the next. I have changed the perspective to see this more clearly.
http://jsfiddle.net/368Rc/ (UPDATED: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>
and 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);
}
Note: I'm testing on Firefox/Chrome, there may be issues on SAFARI.

Answer 1

Currently chrome doesn't support standard properties of transform.
so you need to use prefix to support all your browsers, even in key-frames.
i have updated one of your key-frames, to show how it works, so fix other keyframes as you want.
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;
}
}