附加照片堆的实现

叠加照片堆的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
  * {margin:0;padding:0;}
  .photo_box {position:relative;width:800px;height:425px;margin:20px auto 0;background-color:#CBCBCB;}
  img {position:absolute;padding:10px 10px 10px 10px;border:1px solid #919596;background-color:#FFFFFF;}
  img.photo1 {top:10px;left:20px;transform:rotate(30deg) scale(0.5);-o-transform:rotate(30deg) scale(0.5);-webkit-transform:rotate(30deg) scale(0.5);-moz-transform:rotate(30deg) scale(0.5);}
  img.photo2 {top:20px;left:140px;transform:rotate(10deg) scale(0.5);-o-transform:rotate(10deg) scale(0.5);-webkit-transform:rotate(10deg) scale(0.5);-moz-transform:rotate(10deg) scale(0.5);}
  img.photo3 {top:30px;left:160px;transform:rotate(-10deg) scale(0.5);-o-transform:rotate(-10deg) scale(0.5);-webkit-transform:rotate(-10deg) scale(0.5);-moz-transform:rotate(-10deg) scale(0.5);}
  img.photo4 {top:10px;left:90px;transform:rotate(-20deg) scale(0.5);-o-transform:rotate(-20deg) scale(0.5);-webkit-transform:rotate(-20deg) scale(0.5);-moz-transform:rotate(-20deg) scale(0.5);}
  img:hover {transform:rotate(0) scale(0.5);-o-transform:rotate(0) scale(0.5);-webkit-transform:rotate(0) scale(0.5);-moz-transform:rotate(0) scale(0.5);z-index:2;cursor:pointer;}
</style>
<div class="photo_box">
  <img src="images/1.png" class="photo1" />
  <img src="images/2.jpg" class="photo2" />
  <img src="images/1.png" class="photo3" />
  <img src="images/2.jpg" class="photo4" />
</div>

 

效果参见附件。