基于css3 transform实现散乱的照片排列

分享一款基于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