html打照片墙的代码原理,20行html代码加40行css代码实现照片墙页面（鼠标hover实现旋转缩放）...

html代码：

照片墙

照片展示

css代码：

@charset "utf-8";

/**/

*{

/*全局初始化margin-外边距为0 padding-内边距为0*/

margin: 0;

padding: 0;

}

body{

background-image: url(../img/IMG_20150219_192345.jpg);

background-size: cover;

}

.photo-group img{

margin-top:10px ;

margin-left:10px ;

margin-bottom: 10px;

width: 300px;

/*border 边框*/

border: 5px solid chocolate;

/*圆角*/

border-radius: 15px;

/*阴影

参数1：水平阴影的位置

参数2:垂直阴影的位置

参数3:模糊的距离

参数4:阴影的尺寸

参数5：阴影的颜色与透明度

参数6：阴影的样式

* */

box-shadow:10px 10px 8px gray;

}

.photo-group{

width: 976px;

margin: 0 auto;

}

.photo-group img:hover{

box-shadow:0px 0px 0px;

transform: rotate(20deg) scale(1.2);

/*添加过渡效果*/

transition-duration: 0.5s;

}

.nav{

width: 150px;

margin: auto;

}

效果图:(整个过程是慢慢过渡出来了，没有生硬的感觉)