CSS/JS Animations

gistfile1.txt

/* -------- Start Rotating Cards ---------*/
/* REF: http://css3-magic.brunoscopelliti.com/css3-transition-demos.html
/* HTML */
<div class="ext" ontouchstart="this.classList.toggle('hover');">
	<div class="int">
		<div class="front"> 
			<!-- your custom content --> 
		</div>
		<div class="back"> 
			<!-- your custom content --> 
		</div>
	</div>
</div>
/* CSS */
.ext { 
	perspective: 1000; 
}

.ext,
.front,
.back {	height: 260px; width: 190px; }

.ext:hover .int, 
.ext.hover .int { 
	transform: rotateY(180deg); 
}

.int { 
	transition: .75s;
	transform-style: preserve-3d;
}

.front, 
.back {
	backface-visibility: hidden;
	background: #FFF; 
	border: 1px solid #666; 
	position: absolute; top: 0; left: 0;
}

.front { 
	z-index: 2; 
}

.back { 
	transform: rotateY(180deg); 
}
/* -------- Start Rotating Cards ---------*/