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

by fparent

HTML

<div class="card">
	<div class="content">
		<div class="cardFront">FRONT CONTENT</div>
		<div class="cardBack">BACK CONTENT</div>
		<div class="cardStatic">STATIC CONTENT</div>
    </div>
</div>
<div class="card">
	<div class="content">
		<div class="cardFront">FRONT CONTENT</div>
		<div class="cardBack">BACK CONTENT</div>
		<div class="cardStatic">STATIC CONTENT</div>
    </div>
</div>
    
    
<div class="card">
	<div class="content">
		<div class="cardFront">FRONT CONTENT</div>
		<div class="cardBack">BACK CONTENT</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:relative;
	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;


	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 0.17s;
	-moz-transition: 0s linear...

JavaScript

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