SCALE / FLIP CARD - CLEAN - BIZAMAJIG USAGE

CSS - SEE - http://stackoverflow.com/questions/24503882/the-google-cards-flip-and-grow-effect

by bizamajig

HTML

<div class="card">
  <div class="card-block">
    <h2>
    title
    </h2>
  </div>
</div>

CSS

body{
    position: relative;
}
#master-list .card {
    margin:30px;
    perspective: 500;
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    -o-perspective: 500;
    width:200px;
    height:200px;
    background-color:#59A3FF;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    position:absolute;
    cursor:pointer;
    /* Animate the transitions */
    -webkit-transition:0.8s; text-align:center;
    -moz-transition:0.8s; text-align:center;
    -ms-transition:0.8s; text-align:center;
    -o-transition:0.8s; text-align:center;
    transition:0.8s; text-align:center;
    
}

.card-flip {
  transform:rotateY(180deg) scale(1.2,1.2);
  -webkit-transform:rotateY(180deg) scale(1.2,1.2);
  -moz-transform:rotateY(180deg);
  -o-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  background-color:#FF5959;
    
}

.card-shrink {
  -webkit-transform:scale(1,0);
  -moz-transform:scale(1,0);
  -o-transform:scale(1,0);
  -ms-transform:scale(1,0);
  transform:scale(1,0);
  background-color:#FF5959;
    
}

JavaScript

$( '.cards' ).click(function(){
//  $(this).toggleClass( 'card-flip' );
    var $element = $(this);
    $element.find( ' > *' ).fadeOut( 1, function() {
    	$element.toggleClass( 'card-shrink' );
    });
});