CSS from Hakim's site with the awesome rollover effect

gistfile1.txt

article .roll
{
	display:inline-block;
	overflow:hidden;
	vertical-align:top;
	-webkit-perspective:400px;
	-moz-perspective:400px;
	-o-perspective:400px;
	perspective:400px
}

article .roll span
{
	display:block;
	position:relative;
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	-o-transform-origin:50% 0;
	transform-origin:50% 0;
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	-o-transform-style:preserve-3d;
	transform-style:preserve-3d;
	padding:0 2px
}

article .roll:hover span
{
	background:#ccc;
	-webkit-transform:translate3d(0px,0px,-30px) rotateX(90deg);
	-moz-transform:translate3d(0px,0px,-30px) rotateX(90deg);
	-o-transform:translate3d(0px,0px,-30px) rotateX(90deg);
	transform:translate3d(0px,0px,-30px) rotateX(90deg)
}

article .roll span:after
{
	content:attr(data-title);
	display:block;
	position:absolute;
	left:0;
	top:0;
	color:#fff;
	background:#283e72;
	-webkit-transform-origin:50% 0;
	-moz-transform-origin:50% 0;
	-o-transform-origin:50% 0;
	transform-origin:50% 0;
	-webkit-transform:translate3d(0px,105%,0px) rotateX(-90deg);
	-moz-transform:translate3d(0px,105%,0px) rotateX(-90deg);
	-o-transform:translate3d(0px,105%,0px) rotateX(-90deg);
	transform:translate3d(0px,105%,0px) rotateX(-90deg);
	padding:0 2px
}