分享一款基于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://***/Article/46515

轉載于:https://www.cnblogs.com/liaohuolin/p/4647359.html

總結

以上是生活随笔為你收集整理的基于css3 transform实现散乱的照片排列的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。