纯CSS实现照片墙效果

纯CSS实现的照片墙效果，鼠标经过图片是图片上浮变大，照片程不同角度倾斜如图：

HTML部分

 

CSS部分

*{
    margin: 0;
    padding: 0;
}
body{
    background-color: gray;
}
.container{
    width: 960px;
    height: 450px;
    margin: 30px auto;
    position: relative;
}
.pic{
    width: 160px;
}
/*给一个鼠标事件*/
.container img:hover{
    box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
    /*z-index 属性设置元素的堆叠顺序。
    拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面*/
    z-index: 2;
    /*scale实现缩放效果*/
    transform: rotate(0deg) scale(1.20);
}
.container img{
    padding: 10px 10px 15px;
    color: white;
    border: 1px solid #dddddd;
    /*关于rgba属性：R红色值，G绿色值，B蓝色值，Alpha透明度。色彩空间
    CSS 中的颜色有三种定义方式：使用颜色方法（RGB、RGBA、HSL、HSLA），十六进制颜色值和预定义的颜色名称。*/
    box-shadow: 2px 2px 3px rgba(50,50,50,0.4);
    -webkit-transition: all 0.5s ease-in;
    -moz-transition:all 0.5s ease-in ;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    position: absolute;
    z-index: 1;
}

.pic1{
    left: 400px;
    top:0;
    transform: rotate(-5deg);
}.pic2{
     left: 200px;
     top:0;
     transform: rotate(-20deg);
 }.pic3{
      buttom: 100px;
      right: 100px;
      transform: rotate(-5deg);
  }.pic4{
       buttom: 0px;
       left: 300px;
       transform: rotate(-10deg);
   }.pic5{
        buttom: 0px;
        top: 0px;
        transform: rotate(20deg);
    }.pic6{
         left: 0px;
         top: 0px;
         transform: rotate(10deg);
     }.pic7{
          left: 850px;
          top: 0px;
          transform: rotate(20deg);
      }.pic8{
           buttom: -20px;
           top:60px;
           transform: rotate(5deg);
       }.pic9{
            left: 550px;
            top:90px;
            transform: rotate(15deg);
        }
.pic10{
    left: 400px;
    top:0;
    transform: rotate(-5deg);
}.pic11{
     left: 200px;
     top:0;
     transform: rotate(-30deg);
 }.pic12{
      buttom: 100px;
      right: 100px;
      transform: rotate(-5deg);
  }.pic13{
       buttom: 0px;
       left: 300px;
       transform: rotate(-10deg);
   }.pic14{
        buttom: 0px;
        top: 0px;
        transform: rotate(15deg);
    }.pic15{
         left: 0px;
         top: 0px;
         transform: rotate(10deg);
     }.pic16{
          left: 850px;
          top: 0px;
          transform: rotate(20deg);
      }.pic17{
           buttom: -20px;
           top:50px;
           transform: rotate(25deg);
       }.pic18{
            left: 550px;
            top:90px;
            transform: rotate(15deg);
        }
.pic19{
    left: 400px;
    top: 0px;
    transform: rotate(-20deg);
}.pic20 {
     left: 850px;
     top: 0px;
     transform: rotate(20deg);
 }