Edit in JSFiddle

<div class="extra">
  <div class="cube">
    <div class="front"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>
@keyframes cubeanim {
  from {
    -webkit-transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(180deg);
  }
}

div.extra {
  position: relative;
  top: 100px;
  -webkit-perspective: 500;
  div.cube {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    animation-name: cubeanim;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-play-state: running;
    -webkit-transform-style:preserve-3d;
    div {
      width: 200px;
      height: 200px;
      border: 1px solid #009;
      box-sizing: border-box;
      text-align: center;
      line-height: 198px;
      position: absolute;
      background-color: rgba(128,128,255,.5);
      background-image: -webkit-gradient(
      );
    }
    div.front {
      top: 0;
      left: 0;
      -webkit-transform: translateZ(100px);
    }
    div.back {
      top: 0;
      left: 0;
      -webkit-transform: translateZ(-100px);
    }
    div.left{
      top: 0;
      left: 100px;
      -webkit-transform:rotateY(90deg);
    }
    div.right{
      top: 0;
      right: 100px;
      -webkit-transform:rotateY(-90deg);
    }
    div.top {
      top: 100px;
      left: 0;
      -webkit-transform: rotateX(90deg);
    }
    div.bottom {
      bottom: 100px;
      left: 0;
      -webkit-transform: rotateX(-90deg);
    }
  }
}