叠加照片堆的实现
<!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 /> <img src="images/2.jpg" /> <img src="images/1.png" /> <img src="images/2.jpg" /></div>?
效果参见附件。