html5 照片墙代码 html第九章上机1制作照片墙

h1{
text-align: center;
}
body{
background: #eee;
}
.container{
width: 412px;
height: 172px;
margin: 20px auto;
position:relative;
}
img{
padding: 10px 10px 15px;
background: #fff;
border: 1px solid #ddd;
position: absolute;
top: 50px;
left: 200px;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
transform: rotate(20deg);
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
img:hover{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
box-shadow: -10px 10px 15px #ccc;
}

照片墙制作

运行效果：

鼠标移上去有相应变化

照片墙制作.png