Layered Image Effect Using CSS

This tutorial outlines a simple but impressive CSS effect for you to use on your website.

The effect...

  

The HTML

<div class="box1"> <img src="images/picture1.png" /></div> <div class="box2"> <img src="images/picture2.png" /></div> <div class="box2"> <img src="images/picture2.png" /></div>

The CSS

div.box1
{
z-index:1;
position:relative;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg); 
-o-transform: rotate(-3deg); 
transform: rotate(-3deg);
}

div.box2
{
z-index:2;
position:relative;
left:-150px;
}

div.box3
{
z-index:3;
position:relative;
left:-350px;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg); 
-o-transform: rotate(3deg); 
transform: rotate(3deg);
}