3D-Kubus-Optik

zwei Bilder tauschen sich mittels transform in einer 3D-Optik aus Original von Christian Heilmann: http://jsfiddle.net/eChSd/17/

HTML

<div id="logos">
  <div id="cube">
      <img src="http://thewebrocks.com/demos/mozhtml5/mdnface.png" alt="MDN" class="front">
        <img src="http://thewebrocks.com/demos/mozhtml5/htmlface.png" alt="HTML5" class="back">
  </div>
</div>

CSS

#logos {
  -webkit-perspective: 800px; 
  -moz-perspective: 800px; 
  -ms-perspective: 800px; 
  -o-perspective: 800px; 
  perspective: 800px; 
}
#cube {
  position: relative;
  margin: 50px auto;
  height: 200px;
  width: 200px;
  -webkit-transform: rotateY(0deg);
  -webkit-transition: 1s linear;
  -moz-transform: rotateY(0deg);
  -moz-transition: 1s linear;
  -ms-transform: rotateY(0deg);
  -ms-transition: 1s linear;
  -o-transform: rotateY(0deg);
  -o-transition: 1s linear;
  transform: rotateY(0deg);
  transition: 1s linear;
}
#cube:hover {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.front {
  background:#fff;
  position: absolute;
  height: 200px;
  width: 200px;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  -o-backface-visibility:hidden;
  backface-visibility:hidden;
}
.back {
  background:#fff;
  position: absolute;
  height: 200px;
  width: 200px;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  -ms-backface-visibility:hidden;
  -o-backface-visibility:hidden;
  backface-visibility:hidden;
}
.front{
  z-index: 3;
} 
#cube:hover .front{
  z-index: 1;
}
#cube:hover .back{
  z-index:5;
}