基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose

分享一款基于css3 transform实现散乱的照片排列。这是一款简单零散的css3相册排列特效下载。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div class="main">    <div class="pic pic1">        <img  src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" >        <p>2D转换</p>    </div>            <div class="pic pic2">        <img  src="/static/imghw/default1.png"  data-src="2.jpg"  class="lazy" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" >        <p>2D转换</p>    </div>        <div class="pic pic3">        <img  src="/static/imghw/default1.png"  data-src="3.jpg"  class="lazy" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" >        <p>站长素材</p>    </div>        <div class="pic pic4">        <img  src="/static/imghw/default1.png"  data-src="4.jpg"  class="lazy" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" >        <p>2D转换</p>    </div>        <div class="pic pic5">        <img  src="/static/imghw/default1.png"  data-src="5.jpg"  class="lazy" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" >        <p>2D转换</p>    </div>        <div class="pic pic6">        <img  src="/static/imghw/default1.png"  data-src="6.jpg"  class="lazy" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" >        <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