绚丽照片墙效果

这个效果的实现用css3更为简洁，需要用到transform标签和transition标签以及层数标签z-index，下面就来介绍一下这两个标签。

 

transform标签：

  　　transform：rotate（130deg） scale（3）；

表示旋转130度，并放大3倍

 

transition标签：

　　transition：2s；

表示执行2秒

z-index标签：

　　初始状态时可设置z-index：1   鼠标移到图片上img.hover中的z-index值大于1即可

 

实例代码：

img{
 padding: 10px 10px 15px;background:#fff;border: 1px solid #ddd;
 position: absolute;
  transition:0.5s;
  z-index:1;
}
img:hover{
 transform:rotate(0deg);
  transform:scale(1.2);
  box-shadow: 10px 8px 10px #ccc;
  z-index: 20;
}

.pic1{
 left: 0px;
 top: 20px;
 transform:rotate(25deg);
 
}