Layered Image Effect Using CSS
This tutorial outlines a simple but impressive CSS effect for you to use on your website.
The effect...
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbMSOR_r5Hp7r5Azp_EgnvI2Cuvsp0zKrGs-ssNlDjoWHU7qUBIG53HnrRONB4fsho9-RCr3yqWHVgwspsgw0DHasAmuK9II3uk7iNHEIGGY8g0d7UFjVj80lrKGl9uTQFr48I8YSca50/s1600/music+tuition+poster.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQHKyPJmHWoU19zm_FqfyGJbVasHKrCYgfBUzTgiwrf64nCsSY8v6axrzoWGMeni92x4sOzR5b5wmifcONO9y43iuLMt5Ugx4Ib6OicKBzuMrF3PEGx6xc_Jiq829pJv_RoP7HhN0tBs/s1600/handball+for+life+poster.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh80OzNJDgm61iOJVv_5Vks8CEZI7DLm6H3why0p4QV98N47lcZyg4m-NfggoTzcpFqyhUgCzNHsukhXgkxOMRxJ1ZAOPpdyoKPGZRCn9ru4vyjF73nLizURxCWtAp8tBV3538lxP4LbeA/s1600/completed+poster.png)
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:
![Layered Image Effect Using CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbMSOR_r5Hp7r5Azp_EgnvI2Cuvsp0zKrGs-ssNlDjoWHU7qUBIG53HnrRONB4fsho9-RCr3yqWHVgwspsgw0DHasAmuK9II3uk7iNHEIGGY8g0d7UFjVj80lrKGl9uTQFr48I8YSca50/s72-c/music+tuition+poster.jpg)