Edit in JSFiddle

/**
 * rotate3D/flipped jQuery cssHook v0.1
 * ==========================================================
 * (C) 2011 José Ramón Díaz - [email protected]
 *
 * Elegant and simple cssHooks to perform 3D-like css rotations and control 
 * visible side. 
 * 
 * REQUIRES.
 * A cssHook/code make transform CSS3 property work converting human readable 
 * values into its transformation matrix. In my case i've used the transform 
 * cssHooks from Louis-Rémi Babé to make it compatible, but you are free to use 
 * whatever you want meanwhile makes transform work.  
 *     https://github.com/brandonaaron/jquery-cssHooks
 * 
 * CSS properties use the grammar:
 *     - "rotate3D: <n>[deg]"
 *     - "flipped: true|false"
 * 
 * When an element is rotated, flipped CSS property is set according the 
 * element orientation. Side changes occurs on 90/270 degrees.
 * 
 * Side change event callback can be used defining the function $.fn.flippedEvent. 
 *     $.fn.flippedEvent = function( elem, isFlipped ) { <yourCode> };
 * 
 * Examples:
 *     - elem.css('rotate3D')      - Gets current rotation
 *     - elem.css('rotate3D', 180) - Rotates element 180 degrees
 *     - elem.animate({ rotate3D, -180 }, 1000);    - Animates element from current rotation to -180 degrees
 *     - elem.animate({ rotate3D, "+=360" }, 1000); - Animates element adding 360 degrees to its current rotation
 *     - $('.c').animate({'rotate3D': '+=180'}, 2000, 'easeOutBounce') - Animates using easing function 'easeInOutBounce' defined in jQueryUI
 *
 * Browser copatibility.
 * Any modern CSS3 compatible browser.
 * 
 * NOTE: cssHooks needs jQuery v1.4.3 or greater.
 * 
 * Inspired by zachstronaut's rotate3Di
 *     http://www.zachstronaut.com/projects/rotate3di/
 *
 * Legal stuff
 *     You are free to use this code, but you must give credit and/or keep header intact.
 *     Please, tell me if you find it useful. An email will be enough.
 *     If you enhance this code or correct a bug, please, tell me.
 */
(function ($) {
    // Check if cssHooks are supported
    if(!$.cssHooks) { throw( "jQuery 1.4.3 or above is required for this plugin to work" ); return; }

    ///////////////////////////////////////////////////////////////////////////
      // 'flipped' cssHook. Property has the format: "flipped: true|false"
      $.fn.flippedEvent = null; // Event function called when changing the side: "function( elem, isFlipped? ) {}"
    $.cssNumber['flipped'] = true; // Special units. None in this case
    $.cssHooks['flipped']  = {
        
        get      : function( elem, computed, extra ) { return elem.style['flipped'] || false; },
        set      : function( elem, value ) { 
                        var val = /true/i.test(value); // Boolean conversion
                        if( typeof $.fn.flippedEvent === "function" )
                            $.fn.flippedEvent.flipEvent( elem, val );
                        elem.style['flipped'] = val;  
                    }
        
    };
        
    ///////////////////////////////////////////////////////////////////////////
      // 'rotate3D' csshook. Property has the format: "rotate3D: <n>deg|rad"
    $.cssNumber['rotate3D'] = true; // Special units support 'deg', 'rad', etc
    $.cssHooks['rotate3D']  = {
        
        get: function( elem, computed, extra ) { return elem.style['rotate3D']; },
        set: function( elem, value, unit ) {
                        value = parseFloat( value );
                        apply3DRotation( elem, value, unit );
                        elem.style['rotate3D'] = value;
                    }
        
    };

    // Animation step function for 'rotate3D' custom CSS property
    $.fx.step['rotate3D'] = function ( fx ) { $.cssHooks['rotate3D'].set( fx.elem, fx.now, fx.unit ); };

    // Performs 3D rotation on element
    var apply3DRotation = function( elem, value, unit ) {

        if( value == parseFloat( elem.style['rotate3D'] ) ) return; // No changes

        var dir   = value >= 0 ? 1 : -1;
        var deg   = Math.floor( Math.abs( value ) );
        var scale = ( ( deg % 360 ) >= 180 ? -1 : 1 ) * ( 1 - ( deg % 180 ) / 90 );

        var el  = $(elem); // Caches jQuery element to speed up execution

        var old = parseInt( elem.style['rotate3D'] );
        var inc = old < value ? true : false; 

        var before = Math.abs( old ) % 180;
        var after  = Math.abs( parseInt( value ) ) % 180;

        // Side change control
        if(  inc && before < 90  && after >= 90 || !inc && before > 90  && after <= 90 )
            el.css('flipped', !el.css('flipped') );

        // Performs CSS transform
        el.css( 'transform', 'skew(0deg, ' + dir * deg + 'deg) ' +
                             'scale(' + scale + ', 1)'
        );
    };

})(jQuery);



/* 
 * IMPORTANT - THIS CSSHOOK REQUIREMENTS
 * -------------------------------------------------------------------------
 * transform: jQuery cssHooks adding cross-browser 2d transform capabilities
 * https://raw.github.com/brandonaaron/jquery-cssHooks/master/transform.js
 * === Go to this jsfiddle/resources to see the code ===
 */


// Example code
$('.card').click( function( ev ) { 
    $(ev.target).animate( {'rotate3D': '+=180'}, 2000, 'easeOutBounce');
});

<div class="card"></div>

.card {
    position: relative;
    left: 50px; 
    top: 50px;
    width: 200px; 
    height: 277px; 
    background-image: url(http://upload.wikimedia.org/wikipedia/en/thumb/a/aa/Magic_the_gathering-card_back.jpg/200px-Magic_the_gathering-card_back.jpg);
}