Css3 blur, grow and flip

HTML

<section>
  
<article>
<div class="front">
    <h1> Item 01</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sodales posuere lectus, sit amet placerat neque dapibus eu. Suspendisse adipiscing posuere vehicula. Nulla facilisi. Nam luctus convallis metus, nec tempor magna semper eget. Suspendisse quis velit nunc, et convallis turpis.</p>
    </div>    
  <div class="back">
        <h1> Item 01 (back)</h1>
        <p>Click link to go to page X</p> 
        <a href="#">Page X</a>
  </div>
</article>  

</section>

CSS

/* container */
section {
    font-family:verdana;
}

/* article panels */
article {
    width:100%;
    height:250px;
    position:relative;
    overflow:hidden;
}

article .front,
article .back{
    background:#ccc;
    padding:10px;  
    display:block;
}


/* flip effect */
article .front {
    float:none;
    position:absolute;
    top:0;
    left:0;
    z-index:20;
    width:inherit;
    height:inherit;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -webkit-transform:rotateX(0deg) rotateY(0deg);
    -moz-transform:rotateX(0deg) rotateY(0deg);
    -o-transition:all .4s ease-in-out;
    -ms-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -webkit-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

article .back {
    float:none;
    position:absolute;
    top:0;
    left:0;
    width:inherit;
    height:inherit;
    z-index:10;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -moz-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -o-transition:all .4s ease-in-out;
    -ms-transition:all .4s ease-in-out;
    -moz-transition:all .4s ease-in-out;
    -webkit-transition:all .4s ease-in-out;
    transition:all .4s ease-in-out;
}

article.flip .front {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
}

article.flip .back {
    -webkit-transform:rotateX(0deg) rotateY(0deg);
    -moz-transform:rotateX(0deg) rotateY(0deg);
}

JavaScript

// click to flip article
$('article').on('click', function(e){
  $(this).toggleClass('flip');
  
});

// clicked a href on backpanel
$('article a').on('click',function(e){
   console.log('clicked link');
});