3D Card Flip - ALL BROWSERS - (with static content)

HTML

<div class="card">
	<div class="content">
		<div class="cardFront"><img src="http://img.go.qiagen.com/EloquaImages/clients/Qiagen/%7B5a90419b-6e1b-486c-a4f4-7a3951c0f877%7D_Christmas-card-DL-reindeer-1.jpg"></div>
		<div class="cardBack"><img src="http://img.go.qiagen.com/EloquaImages/clients/Qiagen/%7B2bb32573-24dc-402b-8cba-12dba99202f9%7D_inner-cover.jpg"></div>
		<div class="cardStatic">STATIC CONTENT</div>
    </div>
</div>

CSS

.card {
	perspective: 1000px;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-o-perspective: 1000px;
	-ms-perspective: 1000px;
	margin:80px 150px;
	width:320px;
	height:243px;
	vertical-align:top;
	position:absolute;
	display:block;
	font-size:25px;
    font-weight:bold;
}

.card .content {
	transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-ms-transition: 0.5s ease-out;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;

	/* content backface is visible so that static content still appears */
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
	-moz-backface-visibility: visible;
	-o-backface-visibility: visible;
	-ms-backface-visibility: visible;
  transform-origin: 0 50%; 


	border: 1px solid grey;
    border-radius: 15px;
	position:relative;
	width: 100%;
	height: 100%;
	
}
.card.applyflip .content {
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
}


.card .content .cardStatic {
	/* Half way through the card flip, rotate static content to 0 degrees */
	transition: 0s linear 0.17s;
	-webkit-transition: 0s linear 0.17s;
	-moz-transition: 0s linear 0.17s;
	-o-transition: 0s linear 0.17s;
	-ms-transition: 0s linear 0.17s;
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);

	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	width: 100%;
	line-height:100px;
}

.card.applyflip .content .cardStatic {
	/* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
	transition: 0s linear 0.17s;
	-webkit-transition: 0s linear...

JavaScript

$('.card').click(function(){$('.card').toggleClass('applyflip');}.bind(this));