分享一款基于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://www.w2bc.com/Article/46515

在线预览    源码下载