<div class="showcase">
<div class="inside">
<a href="#" class="active"><img src="assets/img1.jpg" alt="" /></a>
<a href="#"><img src="assets/img2.jpg" alt="" /></a>
<a href="#"><img src="assets/img3.jpg" alt="" /></a>
<a href="#"><img src="assets/img4.jpg" alt="" /></a>
<a href="#"><img src="assets/img5.jpg" alt="" /></a>
<a href="#"><img src="assets/img6.jpg" alt="" /></a>
<a href="#"><img src="assets/img7.jpg" alt="" /></a>
<a href="#"><img src="assets/img8.jpg" alt="" /></a>
<a href="#"><img src="assets/img9.jpg" alt="" /></a>
<a href="#"><img src="assets/img10.jpg" alt="" /></a>
</div>
</div>
   
<div class="helper">
<a href="#" class="prev">Previous</a>
<a href="#" class="next">Next</a>
</div>

.showcase {
width:500px;
height:500px;
position:absolute;
top:50%;
left:50%;
margin:-250px 0 0 -250px;
overflow:hidden;
}
   
.showcase .inside {
position:absolute;
top:50%;
left:0;
height:320px;
width:320px;
margin-top:-160px;
}
   
.showcase .inside a {
display:block;
position:absolute;
top:0;
left:0;
width:320px;
height:320px;
overflow:hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: perspective(300px) rotateY(-20deg);
-webkit-transition: all .5s linear;
-webkit-box-shadow: 0 0 10px #555;
box-shadow: 0 0 10px 2px #111;
}
   
.helper a {
position:fixed;
display:block;
width:64px;
height:64px;
text-indent:-9999px;
outline:none;
background-repeat:no-repeat;
top:50%;
margin-top:-32px;
}
   
.helper .prev {
left:1%;
background-image:url(../images/prev.jpg);
}
   
.helper .next {
right:1%;
background-image:url(../images/next.jpg);
}

var P = {
init: function(){
this._globals();
this.position();
this.events.init();
},
_globals: function(){
S = $('.showcase'),
H = $('.helper'),
A = S.find('.inside').children('a');
},
_transform: function(css){
var arr = [];
for (i in css){
var c = css[i];
arr.push(i+'('+c+')');
}
var css3d = arr.join(' ');
return {
'-webkit-transform': css3d
}
},
_loop: function(element){
var z = A.length;
element.each(function(i){
var t = $(this),
scale = (100-i*2)/100,
css = {
left: 10*i,
'-webkit-transform': 'perspective(300px) rotateY(-20deg) scale('+scale+')'
}
if (element === A){
css.zIndex = z--;
}
t.css(css);
});
},
position: function(){
this._loop(A);
},
events: {
init: function(){
this.prev();
this.next();
},
control: function(control){
var active = A.filter('.active'), name = 'active';
if (control == 'prev'){
var a = active.prev('a'),
all = a.nextAll('a').andSelf(),
transform = {
perspective: '300px',
rotateY: '-20deg',
translateY: '0',
scale: '1'
}
} else if (control == 'next'){
var a = active.next('a'),
all = active.nextAll('a'),
transform = {
perspective: '300px',
rotateY: '-20deg',
translateY: '600px'
}
}
if (a.length){
var css3d = P._transform(transform);
active.css(css3d);
P._loop(all);
A.removeClass(name);
a.addClass(name);
}
},
prev: function(){
H.find('.prev').click(function(){
P.events.control('prev');
return false;
});
},
next: function(){
H.find('.next').click(function(){
P.events.control('next');
return false;
});
}
}
}
   
$(function(){ P.init(); });