JS

$(function(){	var length = $(".container a").length;	var $items = $(".container a");	$items.on("transitionend", function(event){		$items.removeClass("trans");	});	$(".container a").each(function(index, value){		var $child = $(this);		if (index === 0) {			$child.addClass("current showing");		} else if (index === 1) {			$child.addClass("left showing");		} else if (index == 2) {			$child.addClass("out-left");		} else if (index == (length - 2)) {			$child.addClass("out-right");		} else if (index === (length - 1)) {			$child.addClass("right showing");		} else {			$child.addClass("hiding");		};							$child.click(function(){			var $item = $(this);			//next item 			var $nextItem = (index === (length - 1)) ?  $items.eq(0) : $items.eq(index + 1);			//previous item			var $preItem = (index === 0) ? $items.eq(length - 1) : $items.eq(index - 1);			var $rightItem;			if(index == 0){				$rightItem = $items.eq(length - 2);			} else if (index == 1) {				$rightItem = $items.eq(length - 1);			} else {				$rightItem = $items.eq(index - 2);			}			var $leftItem;			if(index == length - 2){				$leftItem = $items.eq(0);			} else if (index == length - 1) {				$leftItem = $items.eq(1);			} else {				$leftItem = $items.eq(index + 2);			}			//current item click,return			if ($item.hasClass("current")) {				return false;			} else if ($item.hasClass("left")) {				//center move right				$preItem.attr("class","trans right showing");				//left move center				$item.attr("class","trans current showing");				//right item move out				$rightItem.attr("class","trans out-right");				//next move left				$nextItem.attr("class","trans left showing");				//left ready				$leftItem.attr("class","out-left");			} else if ($item.hasClass("right")) {				//center move left				$nextItem.attr("class","trans left showing");				//right move center				$item.attr("class","trans current showing");				//left item clear				$leftItem.attr("class","trans out-left");				//previous move right				$preItem.attr("class","trans right showing");				//right ready				$rightItem.attr("class","out-right");			};		});	});});

html

css

body,div{margin: 0;padding: 0;}.container{width: 100%;height: 450px; position: relative;}.container .wapper{margin: 0 auto; width: 480px;height: 300px; position: relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 1000px;-moz-transform-style: preserve-3d;-moz-perspective: 1000px;}.container a{display: block;position: absolute;left: 0;top: 0;-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,0.4);-moz-box-shadow:0px 1px 1px rgba(255,255,255,0.4);box-shadow: 0px 1px 1px rgba(255,255,255,0.4);cursor: pointer;}.container a img{width: 480px;height: 300px;display: block;border: 0;}.container .current{z-index: 2;}.container .left{-webkit-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);-moz-transform: translateX(-350px) translateZ(-200px) rotateY(45deg);z-index: 1;}.container .right{-webkit-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);-moz-transform: translateX(350px) translateZ(-200px) rotateY(-45deg);z-index: 1;}.showing{opacity: 1;visibility: visible;}.hiding{opacity: 0;visibility: hidden;}.out-right{-webkit-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);-moz-transform: translateX(-450px) translateZ(-300px) rotateY(45deg);z-index: 1;opacity: 0;visibility: hidden;}.out-left{-webkit-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);-moz-transform: translateX(450px) translateZ(-300px) rotateY(-45deg);z-index: 1;opacity: 0;visibility: hidden;}.trans{-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}

demo