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>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
	<img src="img/mm1.jpg" class="pic1"  />
	<img src="img/mm2.jpg" class="pic2"  />
	<img src="img/mm3.jpg" class="pic3"  />
	<img src="img/mm4.jpg" class="pic4"  />
	<img src="img/mm5.jpg" class="pic5"  />
	<img src="img/mm6.jpg" class="pic6"  />
	<img src="img/mm7.jpg" class="pic7"  />
	<img src="img/mm8.jpg" class="pic8"  />
	<img src="img/mm9.jpg" class="pic9"  />
	<img src="img/mm10.jpg" class="pic10"  />
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";*{padding:0;margin:0;}
div{font-family:"微软雅黑";font-size:14px;color:#666;padding:0;margin:0;}
body{background:#eee;}
/*css3实现照片墙的样式*/
.container{width:960px;height:450px;margin:60px auto;position:relative;}
.container img{position:absolute;padding:10px 10px 15px;background:#fff;border:1px solid #ddd;-webkit-transition:1s;-moz-transition:1s;transition:1s;z-index:1;}
.container img:hover{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);-webkit-box-shadow:5px 5px 5px #ddd;-moz-box-shadow:5px 5px 5px #ddd;box-shadow:5px 5px 5px #ddd;z-index:2;cursor:pointer;}
.pic1{top:0px;left:400px;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);transform:rotate(-5deg);}
.pic2{top:0px;left:600px;-webkit-transform:rotate(-20deg);-moz-transform:rotate(-20deg);transform:rotate(-20deg);}
.pic3{bottom:0;right:0;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
.pic4{bottom:0;left:300px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
.pic5{bottom:0;left:0;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}
.pic6{top:0;left:0;-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);transform:rotate(10deg);}
.pic7{top:0;left:850px;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);transform:rotate(20deg);}
.pic8{bottom:-20px;right:630px;-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);transform:rotate(5deg);}
.pic9{top:90px;left:550px;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);transform:rotate(15deg);}
.pic10{left:180px;top:20px;-webkit-transform:rotate(-10deg);-moz-transform:rotate(-10deg);transform:rotate(-10deg);}

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