css3 transform实现散乱的照片排列特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3 transform实现散乱的照片排列特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3 transform实现散乱的照片排列</title>
</head>

<body style="background:#ddd;">
<style type="text/css">
*{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);
}
</style>

<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>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)