分享一款基于css3 transform实现散乱的照片排列。这是一款简单零散的css3相册排列特效下载。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div class="main"><div class="pic pic1"><img src="1.jpg"><p>2D转换</p></div><div class="pic pic2"><img src="2.jpg"><p>2D转换</p></div><div class="pic pic3"><img src="3.jpg"><p>站长素材</p></div><div class="pic pic4"><img src="4.jpg"><p>2D转换</p></div><div class="pic pic5"><img src="5.jpg"><p>2D转换</p></div><div class="pic pic6"><img src="6.jpg"><p>2D转换</p></div></div>
css3代码：
*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}.main{width:1000px;margin:50px auto;position:relative; } .pic{width:300px;height:290px;border:1px solid #ccc;background:#fff;box-shadow:2px 2px 3px #aaa;} .pic img{margin:10px 0 0 8px;width:285px; } .pic p{text-align:center;font-size:20px; } .pic1{transform:rotate(7deg);-ms-transform:rotate(7deg);-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg); } .pic2{transform:rotate(-8deg);-ms-transform:rotate(-8deg);-moz-transform:rotate(-8deg);-o-transform:rotate(-8deg);-webkit-transform:rotate(-8deg); } .pic3{position:absolute;z-index:2;top:40px;left:350px;transform:rotate(-35deg);-ms-transform:rotate(-35deg);-moz-transform:rotate(-35deg);-o-transform:rotate(-35deg);-webkit-transform:rotate(-35deg); } .pic4{position:absolute;z-index:3;top:360px;left:350px;transform:rotate(35deg);-ms-transform:rotate(35deg);-moz-transform:rotate(35deg);-o-transform:rotate(35deg);-webkit-transform:rotate(35deg); } .pic5{position:absolute;z-index:4;top:150px;left:600px;transform:rotate(60deg);-ms-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);-webkit-transform:rotate(60deg); } .pic6{position:absolute;z-index:5;top:180px;left:280px;transform:rotate(-60deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-o-transform:rotate(-60deg);-webkit-transform:rotate(-60deg); }
via：http://***/Article/46515
