這個效果的實現用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

總結

以上是生活随笔為你收集整理的绚丽照片墙效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。