Untitled

<div class="wrap">

  <div class="cube">

    <figure class="top">1</figure>

    <figure class="bottom">2</figure>

    <figure class="left">3</figure>

    <figure class="right">4</figure>

    <figure class="front">5</figure>

    <figure class="back">6</figure>

  </div>

</div>

*{

 -webkit-box-sizing: border-box;

 -moz-box-sizing: border-box;

 box-sizing: border-box; 

  margin: 0;

  padding: 0;

}

.cube{

  width: 300px;

  height: 300px;

  position: relative;

  margin: 100px auto;

  -webkit-transform-style:preserve-3d;

  -webkit-perspective:10000px;

  -webkit-animation: cube 10s linear infinite;

}

figure{

  width: 300px;

  height: 300px;

  background:rgba(0,0,0,0.1);

  position: absolute;

  color:#fff;

  font: 6em 'PT Sans',Tahoma,Arial;

  text-align: center;

  line-height: 300px;

  border:10px solid #bbb;

  -webkit-border-radius: 10px;

  -moz-border-radius: 10px;

  border-radius: 10px;

}

.top { -webkit-transform: rotateX(90deg) translateZ(150px); }

.bottom { -webkit-transform: rotateX(-90deg) translateZ(150px); }

.left { -webkit-transform: rotateY(-90deg) translateZ(150px); }

.right { -webkit-transform: rotateY(90deg) translateZ(150px); }

.front { -webkit-transform: translateZ(150px); }

.back { -webkit-transform: rotateY(-180deg) translateZ(150px); }

@-webkit-keyframes cube{

  from{-webkit-transform:rotate(0deg);}

  to{-webkit-transform:rotatex(360deg)rotatey(360deg)rotatez(360deg) ;}

}