分享一款基于css3 transform实现散乱的照片排列。这是一款简单零散的css3相册排列特效下载。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
立即学习“前端免费学习笔记（深入）”；
<div class="main"> <div class="pic pic1"> <img src="1.jpg" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" > <p>2D转换</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1319" title="AI Undetect"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680201295703.jpg" alt="AI Undetect" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1319" title="AI Undetect">AI Undetect</a>
<p>让AI无法察觉，让文字更人性化，为文字体验创造无限可能。</p>
</div>
<a href="/ai/1319" title="AI Undetect" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div> </div> <div class="pic pic2"> <img src="2.jpg" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" > <p>2D转换</p> </div> <div class="pic pic3"> <img src="3.jpg" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" > <p>站长素材</p> </div> <div class="pic pic4"> <img src="4.jpg" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" > <p>2D转换</p> </div> <div class="pic pic5"> <img src="5.jpg" alt="基于css3 transform实现散乱的照片排列_html/css_WEB-ITnose" > <p>2D转换</p> </div> <div class="pic pic6"> <img src="6.jpg" 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
