分享一款基于css3 transform实现散乱的照片排列。这是一款简单零散的css3相册排列特效下载。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
2D转换
2D转换
站长素材
2D转换
2D转换
2D转换
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://www.w2bc.com/Article/46515