Flippy!

Horizontally flipping images in CSS3 on hover with a transition.

HTML

<img class="flippy" src="http://lorempixel.com/200/200/"/>
<div class="flippy" id="flippy1"><p>My div rotated</p></div>

CSS

.flippy {
    /**/-moz-transform:scale(1,1);-webkit-transform:scale(1,1);
    transform:scale(1,1);
    /**/-webkit-transition:all 600ms ease;-webkit-transition:all 600ms ease;
    transition:all 600ms ease; }
    .flippy[flipped] {
        /**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);
        transform:scale(-1,1); }
#flippy1
{
    border: 1px solid white;
    background-color:red;
    height:200px;
    width:200px;
}
p.notflip{
    /**/-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);
    transform:scale(-1,1);
}

JavaScript

// just toggles the 'flipped` attribute.
$('.flippy').click(function(){					
    if ($(this).attr('flipped')){
		$(this).removeAttr('flipped');
		$(this).children('p').removeClass('notflip');}
    else {
		$(this).attr('flipped','flipped');
		$(this).children('p').addClass('notflip');}
});