@charset "utf-8"; body { background:gainsboro; } .div_pic { width:900px; height:450px; margin:60px auto; } .p { /*内边距*/ padding:10px 10px 10px; background:white; /*背景*/ /*左移,下移,虚化*/ box-shadow:5px 5px 4px rgba(50,50,50,0.5); width:150px; /*相对定位*/ position:relative; } /*每张图片倾斜角度*/ .p1 { transform:rotate(-5deg); } .p2 { transform:rotate(9deg); } .p3 { transform:rotate(14deg); } .p1 { transform:rotate(2deg); } .p4 { transform:rotate(-3deg); } .p5 { transform:rotate(8deg); } .p6 { transform:rotate(2deg); } .p7 { transform:rotate(-1deg); } .p8 { transform:rotate(1deg); } .p9 { transform:rotate(-5deg); } .div_pic img:hover { /*旋转角度变回0*/ transform:rotate(0deg) scale(1.5); z-index:9; }
仅利用CS实现照片墙效果。通过对图片内边距和阴影的设置,使用相对定位和向框添加一个阴影,利用transform属性让每个图片以适当的角度旋转,当鼠标指针悬停在上面时水平和垂直的放到原来的1.5倍,显示在最上面。