Rotation for images like Google+

by drublic

HTML

<p class="about-img">
    <img src="http://drublic.de/blog/wp-content/uploads/2011/08/blog-hans-min.jpg" width="220" height="220" alt="A photo of me.">
    <img src="http://drublic.de/blog/wp-content/uploads/2011/08/blog-hans-2-min.jpg" width="220" height="220" alt="Another photo of me.">
</p>

CSS

.about-img { position: relative; width: 220px; height: 220px; cursor: pointer; }
.about-img img {
  position: absolute; top: 0; left: 0;
     -moz-transform: rotateY(-91deg);
       -o-transform: rotateY(-91deg);
  -webkit-transform: rotateY(-91deg);
      -ms-transform: rotateY(-91deg);
          transform: rotateY(-91deg);
     -moz-transition: all 0.2s ease-out;
       -o-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
      -ms-transition: all 0.2s ease-out;
          transition: all 0.2s ease-out;
  visibility: hidden;
}
.about-img img.front {
  visibility: visible;
     -moz-transform: rotateY(0deg);
       -o-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

JavaScript

$( '.about-img img' ).eq( 0 ).addClass( 'front' );

$( '.about-img img' ).click( function() {
  var $el = $( this );

  $el.removeClass( 'front' );
  setTimeout( function() {
    if( $el.next().size() > 0 ) {
      $el.next().addClass( 'front' );
    } else {
      $( '.about-img img' ).eq( 0 ).addClass( 'front' );
    }
  }, 200);

});