.container {
    margin: 0 auto;
    width: 960px;
  }
  
  .left, .right {
    height: 100%;
    overflow: hidden;
    width: 50%;
  }
  
  .left {
    float: left;
  }
  
  .right {
    float: right;
  }  

  .left .stage {
    -moz-perspective-origin: 63.5% -340px;
    -webkit-perspective-origin: 63.5% -340px;
    perspective-origin: 63.5% -340px
  }
  
  .right .stage {
    -moz-perspective-origin: 36.5% -340px;
    -webkit-perspective-origin: 36.5% -340px;
    perspective-origin: 36.5% -340px;
  }  
  
.stage {
  width: 480px;
  height: 500px;
  margin: 10px auto;
  position: relative;
  -moz-perspective: 1600px;
  -webkit-perspective: 1600px;
  perspective: 1600px;

  -moz-animation: introduceCube 1.5s ease-out;
  -webkit-animation: introduceCube 1.5s ease-out;
  animation: introduceCube 1.5s ease-out;
}

.stage .cube {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-transform-origin: 100px 50%;
    -ms-transform-origin: 100px 50%;
    -o-transform-origin: 100px 50%;
    -webkit-transform-origin: 100px 50%;
    transform-origin: 100px 50%;
    -moz-animation: rotate 10s infinite linear;
    -webkit-animation: rotate 10s infinite linear;
    animation: rotate 10s infinite linear;
    position: absolute;
    top: 120px;
    left: 140px; }

  .cube span {
    color: white;
    display: block;
    font-size: 100px;
    height: 200px;
    line-height: 200px;
    opacity: 0.5;
    position: absolute;
    text-align: center;
    width: 200px;
  }
  .stage .back {
    -moz-transform: rotateY(180deg) translateZ(100px);
    -ms-transform: rotateY(180deg) translateZ(100px);
    -o-transform: rotateY(180deg) translateZ(100px);
    -webkit-transform: rotateY(180deg) translateZ(100px);
    transform: rotateY(180deg) translateZ(100px);
    background-color: red; }
  .stage .top {
    -moz-transform: rotateX(90deg) translateZ(100px);
    -ms-transform: rotateX(90deg) translateZ(100px);
    -o-transform: rotateX(90deg) translateZ(100px);
    -webkit-transform: rotateX(90deg) translateZ(100px);
    transform: rotateX(90deg) translateZ(100px);
    background-color: #ff7400; }
  .stage .bottom {
    -moz-transform: rotateX(-90deg) translateZ(100px);
    -ms-transform: rotateX(-90deg) translateZ(100px);
    -o-transform: rotateX(-90deg) translateZ(100px);
    -webkit-transform: rotateX(-90deg) translateZ(100px);
    transform: rotateX(-90deg) translateZ(100px);
    -moz-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
    box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
    -moz-backface-visibility: visible;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    background-color: #aaaaaa;
    -webkit-box-reflect: none; }
  .stage .left {
    -moz-transform: rotateY(-90deg) translateZ(100px);
    -ms-transform: rotateY(-90deg) translateZ(100px);
    -o-transform: rotateY(-90deg) translateZ(100px);
    -webkit-transform: rotateY(-90deg) translateZ(100px);
    transform: rotateY(-90deg) translateZ(100px);
    background-color: #009999; }
  .stage .right {
    -moz-transform: rotateY(90deg) translateZ(100px);
    -ms-transform: rotateY(90deg) translateZ(100px);
    -o-transform: rotateY(90deg) translateZ(100px);
    -webkit-transform: rotateY(90deg) translateZ(100px);
    transform: rotateY(90deg) translateZ(100px);
    background-color: #00cc00; }
  .stage .front {
    -moz-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
    background-color: yellow; }

    @-moz-keyframes rotate {
        0% {
          -moz-transform: rotateY(0);
          transform: rotateY(0); }
      
        100% {
          -moz-transform: rotateY(-360deg);
          transform: rotateY(-360deg); } }
    @-webkit-keyframes rotate {
        0% {
          -webkit-transform: rotateY(0);
          transform: rotateY(0); }
      
        100% {
          -webkit-transform: rotateY(-360deg);
          transform: rotateY(-360deg); } }
    @keyframes rotate {
        0% {
          -moz-transform: rotateY(0);
          -ms-transform: rotateY(0);
          -o-transform: rotateY(0);
          -webkit-transform: rotateY(0);
          transform: rotateY(0); }
      
        100% {
          -moz-transform: rotateY(-360deg);
          -ms-transform: rotateY(-360deg);
          -o-transform: rotateY(-360deg);
          -webkit-transform: rotateY(-360deg);
          transform: rotateY(-360deg); } }
    @-moz-keyframes introduceCube {
        0% {
          opacity: 0;
          top: -20px;
          -moz-transform: scale(0.6);
          transform: scale(0.6); }
      
        20% {
          opacity: 1; }
      
        100% {
          top: 0;
          -moz-transform: scale(1);
          transform: scale(1); } }
    @-webkit-keyframes introduceCube {
        0% {
          opacity: 0;
          top: -20px;
          -webkit-transform: scale(0.6);
          transform: scale(0.6); }
      
        20% {
          opacity: 1; }
      
        100% {
          top: 0;
          -webkit-transform: scale(1);
          transform: scale(1); } }
    @keyframes introduceCube {
        0% {
          opacity: 0;
          top: -20px;
          -moz-transform: scale(0.6);
          -ms-transform: scale(0.6);
          -o-transform: scale(0.6);
          -webkit-transform: scale(0.6);
          transform: scale(0.6); }
      
        20% {
          opacity: 1; }
      
        100% {
          top: 0;
          -moz-transform: scale(1);
          -ms-transform: scale(1);
          -o-transform: scale(1);
          -webkit-transform: scale(1);
          transform: scale(1); }
        }