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

                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);}