CSS3实现带动画效果的照片墙页面

利用CSS3制作一个带有动画效果的照片墙：照片随意分散摆放在页面中，当鼠标放在移动到某张图片上，图片缓慢由倾斜转换为水平，并放大一定比例，移开鼠标，图片恢复原状。
使用到了以下CSS3属性：

transform;
transition;
box-shadow;
position;
z-index.

transform属性：

在CSS3实现曲面阴影和翘边阴影中介绍了使用transform属性的skew(x-angle,y-angle)和rotate(angle)参数设置元素拉伸倾斜和旋转角度，在本次任务中，除了使用以上参数还将使用一个新的参数scale(值)，该参数可以设定元素的放大倍数，支持小数；

transform: rotate(30deg) scale(1.3);
/*旋转30度，放大1.3倍*/
/*记得添加不同浏览器前缀*/

transition属性：

transition属性用于设定元素从一个样式变化为另一个样式的过渡时间；具体参数有：

transition-property:规定该过渡效果的对哪些CSS属性起效。值有三种：none|all|property；
transition-duration：规定过渡效果的时间长度，默认值为0；
transition-timing-function：规定过渡效果的速度曲线：匀速过渡、慢速开始、快速开始等，详细参数参考W3School中的介绍；
transition-delay：规定过渡效果在几秒后开始，默认值为0；

transition:all 0.5s ease-in; 
/*所有属性都起效，过渡时间0.5s，速度曲线：慢速开始*/
/*记得添加不同浏览器前缀*/

box-shadow属性

该属性在CSS3实现曲面阴影和翘边阴影有过介绍；

参数：

**h-shadow(必需)：**水平阴影的位置。允许负值。
**v-shadow(必需)：**垂直阴影的位置。允许负值。
**blur(可选)：**模糊距离。（一般不设置）
**spread(可选)：**阴影的尺寸。
**color(可选)：**阴影的颜色。请参阅 CSS 颜色值。
**inset(可选)：**将外部阴影 (outset) 改为内部阴影。

添加多个阴影用,隔开。

box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); 
/*记得添加不同浏览器前缀*/

position属性：

该属性用于对元素进行定位，已经很熟悉了，不再多做介绍。

z-index属性：

该属性设置元素的堆叠顺序。值越高，顺序越靠前；该元素仅在定位元素上奏效。

下面是本次任务的代码，HTML：

<code class="html">
  
  <html lang="en" >
  <head >
    <meta charset="UTF-8" >
    <title>照片墙  </title>
    <link rel="stylesheet" type="text/css" href="css/style.css" >
  
  <body >
    <div class="container">
      <img class="pic pic1" src="images/mm1.jpg" alt="" >
      <img class="pic pic2" src="images/mm2.jpg" alt="" >
      <img class="pic pic3" src="images/mm3.jpg" alt="" >
      <img class="pic pic4" src="images/mm4.jpg" alt="" >
      <img class="pic pic5" src="images/mm5.jpg" alt="" >
      <img class="pic pic6" src="images/mm6.jpg" alt="" >
      <img class="pic pic7" src="images/mm7.jpg" alt="" >
      <img class="pic pic8" src="images/mm8.jpg" alt="" >
      <img class="pic pic9" src="images/mm9.jpg" alt="" >
      <img class="pic pic10" src="images/mm10.jpg" alt="" >
    </div >

CSS：

*{
  margin: 0;
}
body{
  background-color: #dbdbdb;
}
.container{
  width:960px; 
  height:450px; 
  margin:60px auto; 
  position:relative;
}
.container img{
  background-color: #fff;
  padding: 5px;
  border: 1px solid #ddd;
  box-shadow: 5px 5px 3px rgba(0,0,0,0.3); 
  -webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.3); 
  -moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.3); 
  -o-box-shadow: 5px 5px 3px rgba(0,0,0,0.3); 
  position: absolute;
  z-index: 1;
  -webkit-transition:all 0.5s ease-in;
  -moz-transition:all 0.5s ease-in;
  transition:all 0.5s ease-in; 
}
.container img:hover{
  box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4); 
  -webkit-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);; 
  -moz-box-shadow:15px 15px 20px rgba(50, 50, 50, 0.4);; 
  -o-box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);; 
  -webkit-transform: rotate(0deg) scale(1.3); 
  -moz-transform: rotate(0deg) scale(1.3); 
  transform: rotate(0deg) scale(1.3);
  z-index: 2;
}
.pic1{
  left: 500px;
  top: 100px;
  -webkit-transform: rotate(30deg); 
  -moz-transform: rotate(30deg); 
  transform: rotate(30deg);
}
.pic2{
  left: 100px;
  top: 100px;
  -webkit-transform: rotate(-20deg); 
  -moz-transform: rotate(-20deg); 
  transform: rotate(-20deg);
}
.pic3{
  left: 300px;
  top: 100px;
  -webkit-transform: rotate(5deg); 
  -moz-transform: rotate(5deg); 
  transform: rotate(5deg);
}
.pic4{
  left: 600px;
  top: 150px;
  -webkit-transform: rotate(-30deg); 
  -moz-transform: rotate(-30deg); 
  transform: rotate(-30deg);
}
.pic5{
  left: 700px;
  top: 100px;
  -webkit-transform: rotate(-15deg); 
  -moz-transform: rotate(-15deg); 
  transform: rotate(-15deg);
}
.pic6{
  left: 100px;
  top: 400px;
  -webkit-transform: rotate(-30deg); 
  -moz-transform: rotate(-30deg); 
  transform: rotate(-30deg);
}
.pic7{
  left: 350px;
  top: 300px;
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg); 
  transform: rotate(45deg);
}
.pic8{
  left: 80px;
  top: 200px;
  -webkit-transform: rotate(5deg); 
  -moz-transform: rotate(5deg); 
  transform: rotate(5deg);
}
.pic9{
  left: 600px;
  top: 300px;
  -webkit-transform: rotate(-20deg); 
  -moz-transform: rotate(-20deg); 
  transform: rotate(-20deg);
}
.pic10{
  left: 800px;
  top: 400px;
  -webkit-transform: rotate(30deg); 
  -moz-transform: rotate(30deg); 
  transform: rotate(30deg);
}