CodePen Embed - Cards stack/fan in CSS3 with some jQuery

		<ul class="fan">
			<li>
				<div class="flip">
					<div class="card">
						<div class="face front" data-bgcolor="#5C323E">
							Front
						</div>
						<div class="face back">
							Back
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="flip">
					<div class="card">
						<div class="face front" data-bgcolor="#A82743">
							Front
						</div>
						<div class="face back">
							Back
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="flip">
					<div class="card">
						<div class="face front" data-bgcolor="#E15E32">
							Front
						</div>
						<div class="face back">
							Back
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="flip">
					<div class="card">
						<div class="face front" data-bgcolor="#C0D23E">
							Front
						</div>
						<div class="face back">
							Back
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="flip">
					<div class="card">
						<div class="face front" data-bgcolor="#E5F04C">
							Front
						</div>
						<div class="face back">
							Back
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="flip">
					<div class="card">
						<div class="face front" data-bgcolor="#C0D23E">
							Front
						</div>
						<div class="face back">
							Back
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="flip">
					<div class="card">
						<div class="face front" data-bgcolor="#E15E32">
							Front
						</div>
						<div class="face back">
							Back
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="flip">
					<div class="card">
						<div class="face front" data-bgcolor="#A82743">
							Front
						</div>
						<div class="face back">
							Back
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="flip">
					<div class="card">
						<div class="face front" data-bgcolor="#5C323E">
							Front
						</div>
						<div class="face back">
							Back
						</div>
					</div>
				</div>
			</li>
		</ul>
		<footer>
			An experiment by <a href="http://www.dviate.com/" rel="external">Dviate</a> &mdash; Color inspiration via <a href="http://www.colourlovers.com/palette/1015109/All_Eyes_On_You" rel="external">Colourlovers</a>
		</footer>

@import "bourbon";

/* coloring */
$black: #000;
$white: #F1EDDC;
$purple: #A82743;
$orange: #E15E32;

/* animation stuff */
$cards-transition-duration: 750ms;
$cards-translate: 10;

/* card variables */
$cards-amount: 9; /* the amount of cards, keep this amount ODD, NOT EVEN! */

$card-width: 200px; /* each card's width */
$card-height: 2 * $card-width; /* each card's height */

$firsthalf: ($cards-amount / 2) - 0.5; /* not needed to edit */
$secondhalf: ($cards-amount / 2) + 1.5; /* not needed to edit */

@import "https://fonts.googleapis.com/css?family=Varela+Round";

body,
html {
	font-family: "Varela Round", sans-serif;
	height: 100%;
	overflow: hidden;
	background-color: $purple;
	color: $white;
	@include background-image(radial-gradient(center, ellipse cover, lighten($purple, 15%) 0%, darken($purple, 25%) 100%));
}

a,
a:link,
a:active,
a:hover,
a:visited {
	color: $white;
	text-decoration: none;
	border-bottom: 1px solid rgba($white, 0);
	@include transition(all $cards-transition-duration);
}

a:hover {
	border-bottom: 1px solid rgba($white, 1);
}

.fan {
	height: $card-height;
	text-align: center;
	position: relative;
	top: 50%;
	@include transform(translateY(-50%));
	/* cardsss */
	li {
		width: $card-width;
		height: $card-height;
		position: absolute;
		top: 0;
		left: calc(50% - #{$card-width / 2});
		cursor: pointer;
		border-radius: 8px;
		display: block;
		margin: 5px;
		opacity: 0;
		@include perspective(1800);
		@include transition(all $cards-transition-duration);
		@include transform-origin(50% 100%);
		&:hover {
			z-index: #{$cards-amount + 1};
			@include transform(scale(1.25) rotate(3deg) rotatex(-3deg) translate(-10px, -5px)!important);
			//@include box-shadow(0px 0px 25px rgba($black,.55)!important);
		}
		/* normal states */
		@for $i from 1 through $secondhalf {
			&:nth-child(#{$i}) {
				@include transform(rotate(#{($i - $cards-amount + 4)*8}deg));
				@include animation(fadeIn $cards-transition-duration ($cards-transition-duration/5)*$i ease-in-out forwards);
				//@include box-shadow(0px 5px 5px rgba($black,.05));
			}
		}
		&:nth-child(#{$secondhalf - 1}) {
			@include transform(translate(0) rotate(0deg));
			@include animation(fadeIn $cards-transition-duration ($cards-transition-duration/5)*$secondhalf ease-in-out forwards);
			//@include box-shadow(0px 5px 5px rgba($black,.05));
		}
		@for $i from length($secondhalf) through $cards-amount {
			&:nth-child(#{$i}) {
				@include transform(rotate(#{($i - 5)*8}deg));
				@include animation(fadeIn $cards-transition-duration ($cards-transition-duration/5)*$i ease-in-out forwards);
				//@include box-shadow(0px 5px 5px rgba($black,.05));
			}
		}
		/* hover states */
		&.before {
			@for $i from 1 through ($cards-amount - 1) {
				&.prefix_#{$i} {
					$zIndex: (((90 / $cards-amount) * ($i - 1))/10)+1;
					$angle: ((25 / $cards-amount) * ($i*1.25));
					$translate: (($i * $cards-translate) + $cards-amount);
					@include transform(rotate(-#{$angle}deg) translate(-#{($translate*6)}px, #{($translate)}px));
					box-shadow: -#{$i}px #{$i}px 5px rgba($black,.25);
					z-index: #{$i};
				}
			}
		}
		&.after {
			@for $i from 1 through ($cards-amount - 1) {
				&.prefix_#{$i} {
					$zIndex: (((90 / $cards-amount) * ($i - 1))/10)-1;
					$angle: ((25 / $cards-amount) * ($i * 1.25)) ;
					$translate: (($i * $cards-translate) + $cards-amount);
					@include transform(rotate(#{$angle}deg) translate(#{$translate*6}px, #{($translate)}px));
					box-shadow: -#{$i}px #{$i}px 5px rgba($black, .25);
					z-index: #{$zIndex};
				}
			}
		}
		/* content for the "cards" */
		.content {
			height: $card-width * .67;
			line-height: $card-width * .67;
			color: $white;
			font-size: 40px;
		}
		.flip {
			width: $card-width;
			height: $card-height;
			position: relative;
			@include perspective(1800);
			.card {
				width: $card-width;
				height: $card-height;
				@include transform-style(preserve-3d);
				@include transition(all $cards-transition-duration/2);
				&.flipped {
					@include transform(rotateX(-190deg));
				}
				.face {
					width: $card-width;
					height: $card-height;
					position: absolute;
					z-index: 99;
					text-align: center;
					line-height: $card-height;
					font-size: 30px;
					text-shadow: rgba($black, .25) 0px 2px 1px;
					border-radius: 8px;
					box-shadow: 0px 0px 25px rgba($black,.55);
					@include backface-visibility(hidden);
					&.front {
						position: absolute;
						z-index: 1;
						color: $white;
						cursor: pointer;
					}
					&.back {
						background: $white;
						color: $black;
						cursor: pointer;
						@include transform(rotateX(-180deg));
					}
				}
			}
		}
	}
}

footer {
	position: fixed;
	bottom: 10px;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
	font-size: 9px;
	color: $white;
	opacity: 0;
	@include animation(fadeIn $cards-transition-duration ($cards-transition-duration/5)*$cards-amount ease-in-out forwards);
}

@include keyframes(fadeIn) {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

View Compiled

			$(document).ready(function () {
				$("body").bind("touchstart", function() { /* nothing needed here, see http://stackoverflow.com/a/23012580 */ });
				$(".fan li").hover(function() {
					$(this).nextAll().each(function(i) {
						$(this).addClass("after prefix_" + (i+1));
					});
					$(this).prevAll().each(function(i) {
						$(this).addClass("before prefix_" + (i+1));
					});
				}, function() {
					$(this).nextAll().each(function(i) {
						$(this).removeClass("after prefix_" + (i+1));
					});
					$(this).prevAll().each(function(i) {
						$(this).removeClass("before prefix_" + (i+1));
					});
				});
				/* add the "flip" function */
				$(".fan li").click(function(){
					$(this).find(".card").addClass("flipped").mouseleave(function(){
						$(this).removeClass("flipped");
					});
					return false;
				});
				/* set the card's data + bgcolor */
				$(".face.front").each(function(){
					$(this).css("background",$(this).data("bgcolor"));
					$(this).html($(this).data("bgcolor"));
				});
				$("a[rel='external']").attr("target", "_blank");
			});

This Pen is owned by Jermaine on CodePen.

See more by @dviate on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js