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
Reviewed by Opus Web Design
on
08:49
Rating:
