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


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);
}
Layered Image Effect Using CSS Layered Image Effect Using CSS Reviewed by Padraig Cahill on August 18, 2015 Rating: 5

Free Design Stuff Ad