card animation

by gongzza

HTML

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    
<ul class="thumbList">
	<li class="tf-origin-top"><span class="border-blue"><img src="http://gongzza.no-ip.biz:8000/public/image/love.png" class="img-circle"></span></li>
	<li class="tf-origin-bottom"><span class="border-blue"><img src="http://gongzza.no-ip.biz:8000/public/image/love.png" class="img-circle"></span></li>
	<li class="tf-origin-left"><span class="border-blue"><img src="http://gongzza.no-ip.biz:8000/public/image/love.png" class="img-circle"></span></li>
	<li class="tf-origin-right"><span class="border-blue"><img src="http://gongzza.no-ip.biz:8000/public/image/love.png" class="img-circle"></span></li>
	<li class="tf-rotate-x"><span class="border-blue"><img src="http://gongzza.no-ip.biz:8000/public/image/love.png" class="img-circle"></span></li>
	<li class="tf-rotate-y"><span class="border-blue"><img src="http://gongzza.no-ip.biz:8000/public/image/love.png" class="img-circle"></span></li>
</ul>

CSS

.thumbList {
		margin: 15px auto 0 auto;
		width: 340px;
		height: 100%;
		clear: both;
	}
	.thumbList:after {
		content: "";
		height: 0;
		display: block;
		visibility: hidden;
		clear: both;
	}
	ul {
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		color: #464646;
	}
	.thumbList li:nth-child(2n+1) {
		margin-right: 6px;
	}
	
	.thumbList li {
		position: relative;
		display: inline-block;
		float: left;
		margin-bottom: 6px;
		width: 165px;
		height: 184px;
		border: 1px solid #40badc;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		background: #fff;
		
		text-align: center;
		padding-top: 25px;
		
		-webkit-transition: -webkit-transform 0.5s;
	}
	
	.border-blue {
		border: solid 5px #40badc;
		border-radius: 50%;
		position: relative;
		display: inline-block;
	}
	
	.tf-origin-top {
		-webkit-transform-origin: top;
	}
	.tf-origin-top.active {
		-webkit-transform: rotateX(90deg);
	}
	.tf-origin-left {
		-webkit-transform-origin: left;
	}
	.tf-origin-left.active {
		-webkit-transform: rotateY(90deg);
	}
	.tf-origin-bottom {
		-webkit-transform-origin: bottom;
	}
	.tf-origin-bottom.active {
		-webkit-transform: rotateX(-90deg);
	}
	.tf-origin-right {
		-webkit-transform-origin: right;
	}
	.tf-origin-right.active {
		-webkit-transform: rotateY(-90deg);
	}

	.tf-rotate-x.active {
		-webkit-transform: rotateX(90deg);
	}
	.tf-rotate-y.active {
		-webkit-transform: rotateY(90deg);
	}

JavaScript

$(document).ready(function() {
		$(".thumbList li").each(function(i) {
		
			$(this)
				.on("mousedown", function(evt) {
					evt.preventDefault();
					$(this).addClass("active");
				})
				.on("touchstart", function(evt) {
					evt.preventDefault();
					$(this).addClass("active");
				})
				.on("webkitTransitionEnd", function(evt) {
					evt.preventDefault();
					$(this).removeClass("active");
				})
			;
		
		});
	});