3d Cube

HTML

<section class="container">
  <div class="cube">
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
  </div>
 </section>

CSS

@keyframes giro{
   100%{transform: translateX(21px) translateZ( -70px ) rotateY( 180deg );}
}
@-webkit-keyframes giro{
   100%{transform: translateX(21px) translateZ( -70px ) rotateY( 180deg );}
}
@-moz-keyframes giro{
   50%{transform:translateZ( -70px ) rotateY( 180deg );}
   100%{transform:translateZ( -70px ) rotateY( 360deg );}
}
.container {
	width: 200px;
	height: 200px;
	position: relative;
	perspective: 1000px;
	margin: 0 auto;
}
.cube {
	width: 100%;
	height: 100%;
	position: absolute;
	transform-style: preserve-3d;
	transition-duration: 2s;
	transform: translateZ( -70px );
	transform-origin: center;
	-moz-animation: 5s linear giro infinite;
	-webkit-animation: 5s linear giro infinite;
  animation: 5s linear giro infinite;
}
.cube figure {
	margin: 0;
	display: block;
	position: absolute;
	width: 140px;
	height: 140px;
	left: 10px;
	top: 10px;
	background: url('//www.gravatar.com/avatar/e94f2d3d00aeb7532d8ab431e615792b/?default=&s=140');
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.cube figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 70px ); }
.cube figure:nth-child(2) { transform: rotateY(  90deg ) translateZ( 70px ); }
.cube figure:nth-child(3) { transform: rotateY(  -90deg ) translateZ( 70px ); }
.cube figure:nth-child(4) { transform: rotateY( 180deg ) translateZ( 70px ); }