CSS3实现照片墙的布局及动画效果_html/css_WEB-ITnose

目标：实现照片墙布局和鼠标经过图片时的动画效果

涉及知识点：CSS3的动画、过渡、变形（缩放），绝对定位与相对定位

疑点：绝对定位与相对定位对页面元素显示层次的影响

参考极客学院布道师iwen的课程

源码??

html部分：

    
         
     
         
          
          
          
          
          
          
          
          
          
          
          
      
 CSS部分(picwall.css)：

*{    margin: 0px;}body{    background-color: gainsboro;}.con{    width: 960px;    height: 450px;    margin: 50px auto;    /*position: relative;*/}.pic{    width: 130px;    padding: 10px;    /*position: relative;*/}.con img{    /*padding:10px 10px 15px ;*/    /*border: 1px solid #aaaaaa;*/    /*box-shadow: 2px 2px 2px rgba(60,60,60,0.5);*/    /*position: absolute;*/    z-index: 1;    transition: all 0.6s ease-in;}.con img:hover{    z-index: 2;/*实现鼠标经过时图片置于顶层，但这要求img里使用绝对定位                相应的每个图片的位置也要重新修改*/    transform: rotate(0deg) scale(1.2);}.pic25{    left: 10px;    top: 0px;    transform: rotate(-6deg);    -webkit-transform: rotate(-6deg);/*chrome浏览器适配*/}.pic26{    left: -2px;    top: 10px;    transform: rotate(0deg);    /*此处应该加上浏览器适配，默认使用chrome浏览器测试，后面同样*/}.pic27{    left: 2px;    top: 0px;    transform: rotate(-16deg);}.pic28{    left: -2px;    top: 0px;    transform: rotate(-6deg);}.pic29{    left: 10px;    top: 20px;    transform: rotate(20deg);}.pic30{    left: 10px;    top: 0px;    transform: rotate(-6deg);}.pic31{    left: 10px;    top: 0px;    transform: rotate(-6deg);}.pic32{    left: 10px;    bottom: -7px;    transform: rotate(16deg);}.pic33{    left: 10px;    top: 0px;    transform: rotate(-6deg);}.pic34{    left: 3px;    top: 10px;    transform: rotate(3deg);}.pic35{    left: 10px;    top: 0px;    transform: rotate(-16deg);}.pic36{    left: 20px;    top: 0px;    transform: rotate(10deg);}