<div class="container">
  <p>Normal speed. Hover to see the final effect</p>
  <ul>
    <li>
      <span class="icon"></span>
      <span class="label">item 1</span>
    </li>
    <li>
      <span class="icon"></span>
      <span class="label">item 2</span>
    </li>
    <li>
      <span class="icon"></span>
      <span class="label">item 3</span>
    </li>
    <li>
      <span class="icon"></span>
      <span class="label">item 4</span>
    </li>
    <li>
      <span class="icon"></span>
      <span class="label">item 5</span>
    </li>
  </ul>

  <p>Sloooooowed down to demonstrate the effect:</p>

  <ul class="slow">
    <li>
      <span class="icon"></span>
      <span class="label">item 1</span>
    </li>
    <li>
      <span class="icon"></span>
      <span class="label">item 2</span>
    </li>
    <li>
      <span class="icon"></span>
      <span class="label">item 3</span>
    </li>
    <li>
      <span class="icon"></span>
      <span class="label">item 4</span>
    </li>
    <li>
      <span class="icon"></span>
      <span class="label">item 5</span>
    </li>
  </ul>
</div>

/*===== Presentational/layout stuff =====*/
li {
  position:relative;
  text-align:center;
  width:75px;
  
  /* Decrease this number to *increase* the 3D effect (and vice versa). */
  perspective:250 !important;
}
.icon {
  background:url(http://lorempixel.com/50/50/nature/1);
  display:inline-block;
  height:50px;
  width:50px;  
}
li:nth-of-type(2n+2) .icon {
  background:url(http://lorempixel.com/50/50/nature/2);
}
li:nth-of-type(2n+3) .icon {
  background:url(http://lorempixel.com/50/50/nature/3);
}
li:nth-of-type(2n+4) .icon {
  background:url(http://lorempixel.com/50/50/nature/4);
}
li:nth-of-type(2n+5) .icon {
  background:url(http://lorempixel.com/50/50/nature/5);
}
.label {
  left:20px;
  position:absolute;
  top:17px;
}

/*===== Animation (ie: the good stuff) =====*/
li:hover .icon, .label {
  transform:translateZ(-32px) rotateY(180deg);
  
  animation-duration:0.33s;
  animation-name:rotateOut;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}

.icon, li:hover .label {
  animation-duration:0.33s;
  animation-name:rotateIn;
  animation-timing-function:linear;
  animation-fill-mode:forwards;
}

.slow .icon, .slow .label,
.slow li:hover .icon, .slow li:hover .label {
  animation-duration:2s;
}

@keyframes rotateIn {
  0% {
    opacity:0;
		transform:translateZ(-100px) translateX(0) rotateY(180deg);
	}
  /*
    We need to reset it back to negative to avoid it flipping around like crazy
    Comment this line out to see what I mean.
  */
	1% {
		transform:translateZ(-100px) rotateY(-180deg);
	}
 
	50% {
		opacity:0.5;
		z-index:1;
	
		transform:translateZ(-50px) translateX(-25px) rotateY(-90deg);
	}

	100% {
		opacity:1;
		z-index:1;
	
		transform:translateZ(0) translateX(0) rotateY(0deg);
	}
}

@keyframes rotateOut {
	0% {
		opacity:1;
		
		transform:translateZ(0) translateX(0) rotateY(0deg);
	}
 
	50% {
		opacity:0.5;
		z-index:0;
		
		transform:translateZ(-50px) translateX(25px) rotateY(90deg);
	}

	100% {
		opacity:0;
		z-index:0;
		
		transform:translateZ(-100px) translateX(0) rotateY(180deg);
	}
}

/*===== Boring stuff =====*/
body {
  background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/creampaper.png);
  font-family:Ubuntu,Helvetica,Arial,sans;
  padding:20px;
  text-shadow:0px 1px 1px #FFF;
}
.container {
  margin:0 auto;
  width:425px;
}
p { margin-bottom:10px; }
ul {
  margin-bottom:20px;
  overflow:hidden; /* contain floats */
}
li {
  float:left;
  margin-right:10px;
}