CSS 3D Image Gallery

December 21, 2011 by Marcin Dziewulski

Introduction

In this experiment we will create a little gallery using CSS 3D transforms and an advanced javascript with jQuery framework.

Demo Download

Please note that the CSS 3D transforms effects will only work in Webkit browsers (Chrome, Safari).

HTML

<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>

CSS

.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);
}

JavaScript

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(); });

Author

Marcin Dziewulski

Experienced and creative web developer from Poland, addicted to jQuery and CSS. Follow him on Twitter: @marcinmobily

Comments (6)

Maciek

December 25, 2011 - 06:03

Marcin, I won't bother looking into it if does not work in Firefox.

Pozdrawiam,
Maciek

mobily

December 25, 2011 - 15:59

Maciek, please note that this will only work properly in webkit browsers: Chrome, Safari. Read more here: http://www.w3schools.com/css3/css3_3dtransforms.asp