css实现照片堆叠效果

原文:http://designshack.net/articles/css/use-pseudo-elements-to-create-an-image-stack-illusion/

效果图：

The HTML

为了建立第一张照片，也就是最上面的那张。我们只需要添加一个div，里面包含照片的img。就这么多，剩下的效果都是通过CSS来实现的。确保div的class为stackone。

<div class="stackone">
    <img src="http://lorempixel.com/400/200/sports/1">
</div>

Basic Styles

这里没有什么复杂的地方，只是设置基本的margin和padding，目的是让所有的浏览器得到相同的页面效果。

* {margin:0px; padding:0px;}
body {background:#ccd3d7;}

Top Image Styles

顶层照片的样式CSS

.stackone {
    border: 6px solid #fff;
    float: left;
    height: 200px; width: 200px;
    margin: 50px;
    position: relative;

    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

其中前5行决定图片的大小和位置；后面3行设置阴影效果，为了得到比较好看的立体效果。
到这里，图片应该是这样的：

The First Pseudo Element

现在我们添加一层底片。我们想得到的效果是：底层图片看上去好像是在顶层照片下面。我们可以用CSS的伪类:before来实现。

.stackone:before {
    content: "";
    height: 200px; width: 200px;    
    background: #eff4de;
    border: 6px solid #fff;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

到这里，图片却这样：

这不是我们想要的效果。如何修复？我们需要给:before加入一些定位，然后设置z-index将它放在后面。

.stackone:before {
    content: "";
    height: 200px; width: 200px;
    background: #eff4de;
    border: 6px solid #fff;
     
    position: absolute;
    z-index: -1;
    top: 0px;
    left: -10px;
     
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
     
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg);
}

再次检查，图片正常了!

The Second Pseudo Element

.stackone:after {
    content: "";
    height: 200px; width: 200px;
    background: lightblue;
    border: 6px solid #fff;
    position: absolute;
    z-index: -1;
    top: 5px;
    left: 0px;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}

大功告成：