绚丽照片墙效果

这个效果的实现用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);
 
}

原文地址:https://www.cnblogs.com/wyy725872/p/4355539.html