How to use CSS3 to simply realize Photo Wall effect

Editor to share with you how to use CSS3 to simply achieve the photo wall effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

HTML

The code is as follows:

Photo wall making

CSS (browser private attribute prefix is omitted here!)

The code is as follows:

* {margin:0; padding:0;}

Body {background-color: # eee; padding-top: 50px;}

H3 {text-align: center;}

.container {position: relative; width:1000px; height:700px; margin:0px auto;}

Img {position: absolute; top:50px; left:100px; cursor: pointer

Padding:10px 10px 25px; background-color: # fff; border:1px solid # ddd

Transition:0.5s; box-shadow: 3px 3px 3px # ccc

}

.img1 {left:40px; top:20px; transform:rotate (30deg); z-index: 1;}

.img2 {left:156px; top:156px; transform:rotate (- 30deg); z-index: 1;}

.img3 {left:381px; top:60px; transform:rotate (30deg); z-index: 1;}

.img4 {left:458px; top:256px; transform:rotate (30deg); z-index: 1;}

.img5 {left:684px; top:110px; transform:rotate (- 40deg); z-index: 1;}

Img:hover {transform:rotate (0deg); transform:scale (1.5); box-shadow: 6px 6px 6px # 656565; z-index: 2;}

The above is all the content of the article "how to use CSS3 to simply achieve Photo Wall effect". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!