Scattered photo arrangement based on css3 transform_html/css_WEB-ITnose

Share a scattered photo arrangement based on css3 transform. This is a simple and scattered css3 photo album arrangement effect download. The renderings are as follows:

Online preview Source code download

Implemented code.

html code:

<div class="main">    <div class="pic pic1">        <img  src="/static/imghwm/default1.png"  data-src="1.jpg"  class="lazy" alt="Scattered photo arrangement based on css3 transform_html/css_WEB-ITnose" >        <p>2D转换</p>    </div>            <div class="pic pic2">        <img  src="/static/imghwm/default1.png"  data-src="2.jpg"  class="lazy" alt="Scattered photo arrangement based on css3 transform_html/css_WEB-ITnose" >        <p>2D转换</p>    </div>        <div class="pic pic3">        <img  src="/static/imghwm/default1.png"  data-src="3.jpg"  class="lazy" alt="Scattered photo arrangement based on css3 transform_html/css_WEB-ITnose" >        <p>站长素材</p>    </div>        <div class="pic pic4">        <img  src="/static/imghwm/default1.png"  data-src="4.jpg"  class="lazy" alt="Scattered photo arrangement based on css3 transform_html/css_WEB-ITnose" >        <p>2D转换</p>    </div>        <div class="pic pic5">        <img  src="/static/imghwm/default1.png"  data-src="5.jpg"  class="lazy" alt="Scattered photo arrangement based on css3 transform_html/css_WEB-ITnose" >        <p>2D转换</p>    </div>        <div class="pic pic6">        <img  src="/static/imghwm/default1.png"  data-src="6.jpg"  class="lazy" alt="Scattered photo arrangement based on css3 transform_html/css_WEB-ITnose" >        <p>2D转换</p>    </div></div>

css3 code:

*{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