Stacking images in 3d format

I’m trying to arrange my images like the one attached. can someone give me a clue the best way to do this in css3 or point to any other way to achieve it.

Thanks

Hi,

You could do it without css3 by just increasing the height and width attributes of the image slightly for each row. With css3 you could just scale each image slightly and then increase the margin on each row.

e.g.In the example below the span represents the image.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.gallery {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
}
.gallery li { display:inline }
.gallery span {
	display:inline-block;
	width:60px;
	height:60px;
	margin:0 1% -20px;
	position:relative;
	border:1px solid #000;
	background:red;
}
.r2 span {
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	transform:scale(1.1);
	margin:0 1.2% -20px;
	background:blue;
}
.r3 span {
	-webkit-transform:scale(1.2);
	-moz-transform:scale(1.2);
	transform:scale(1.2);
	margin:0 1.3% -20px;
	background:green;
}
.r4 span {
	-webkit-transform:scale(1.3);
	-moz-transform:scale(1.3);
	transform:scale(1.3);
	margin:0 1.4% -20px;
	background:yellow;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
.r2 span{zoom:1.2}
.r3 span{zoom:1.3}
.r4 span{zoom:1.4}
</style>
<![endif]-->
</head>

<body>
<ul class="gallery r1">
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
</ul>
<ul class="gallery r2">
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
</ul>
<ul class="gallery r3">
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
</ul>
<ul class="gallery r4">
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
		<li><span>Image</span></li>
</ul>
</body>
</html>


You just have to increase the size of the image in each row slightly and increase the margin. I can’t see a way to do it automatically.

Thanks a lot, really appreciate you help, it worked perfect!

I applied it to this page http://projects.87digital.com/visual-search/lightbox/index2.html
but the images are not well aligned as the example i showed, could you help please.

Thanks

It’s looking pretty close to me :slight_smile:

The last two rows could probably have margins of 1.5% and 1.7% respectively and then it would look more spaced out. I think its just a matter of tweaking the margins a little until you are happy with it :slight_smile:

is looking pretty close to me too. Remember your math and you basic drawing principles :slight_smile: you have to decide where your horizon line lies… draw some grid lines and note the proportion of the each grid row to the one behind it ( this could probably be calculated with a tangent coefficient as well) another tip is: foreshortening. Remember the frontward rows will then to overlap back rows a a little more each time.

Try this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3d images</title>

<style type="text/css">
.gallery {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
}
.gallery li { display:inline }
.gallery img {
	width:95px;
	height:95px;
	margin:0 1% 
	position:relative;
}
.r1 {margin-bottom:-25px;} 	
.r2 img {
	-webkit-transform:scale(1.15);
	-moz-transform:scale(1.15);
	transform:scale(1.15);
	margin:0 1% }
.r2 {margin-bottom:-20px;} 	
.r3 img {
	-webkit-transform:scale(1.3);
	-moz-transform:scale(1.3);
	transform:scale(1.3);
	margin:0 2%  
}
.r3 {margin-bottom:-10px;} 	
.r4 img {
	-webkit-transform:scale(1.5);
	-moz-transform:scale(1.5);
	transform:scale(1.5);
	margin:0 3.5%  
}

#container{
	margin:20px 0 40px 0;
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
.r2 span{zoom:1.15}
.r3 span{zoom:1.3}
.r4 span{zoom:1.5}
</style>
<![endif]-->


</head>

<body>
<div id="container">
<ul class="gallery r1" >
	   <li><img src="images/thumbs/1.jpg" alt="" width="90" height="90"/></li>
	   <li><img src="images/thumbs/2.jpg" alt="" width="90" height="90"/></li>

	    <li><img src="images/thumbs/3.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/4.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/5.jpg" alt="" width="90" height="90"/></li>
</ul>
<ul class="gallery r2">
		<li><img src="images/thumbs/6.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/7.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/8.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/9.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/10.jpg" alt="" width="90" height="90"/></li>

</ul>
<ul class="gallery r3">
		<li><img src="images/thumbs/11.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/1.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/2.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/3.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/4.jpg" alt="" width="90" height="90"/></li>
</ul>
<ul class="gallery r4">
		<li><img src="images/thumbs/5.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/6.jpg" alt="" width="90" height="90"/></li>

		<li><img src="images/thumbs/7.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/8.jpg" alt="" width="90" height="90"/></li>
		<li><img src="images/thumbs/9.jpg" alt="" width="90" height="90"/></li>
</ul>
</div>
</body>
</html>

Incidentally, the spans are redundant, bottom margins should be applied to BLOCK elements (the UL), and you had CSS in tags. I corrected that as well. One thing I didnt change was you horizontal margins. That will continue to work PROPORTIONALLY. however as viewport is widened the gap between images will also widen… this may or may not be a desired effect. Feel free to replace %s with mathematically proportional px or em values.