CSS3制作的照片墙-CSDN博客

本文链接：https://blog.csdn.net/pangchengyong0724/article/details/52065766

照片墙效果

图片自己弄

html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>photowall</title>
    <link rel="stylesheet" href="photo.css" type="text/css">
</head>
<body>
    <div class="contenter">
        <img class="btn img1" src="img/1.jpg" alt="">
        <img class="btn img2" src="img/2.jpg" alt="">
        <img class="btn img3" src="img/3.jpg" alt="">
        <img class="btn img4" src="img/4.jpg" alt="">
        <img class="btn img5" src="img/5.jpg" alt="">
        <img class="btn img6" src="img/13.jpg" alt="">
        <img class="btn img7" src="img/7.jpg" alt="">
        <img class="btn img8" src="img/8.jpg" alt="">
        <img class="btn img9" src="img/9.jpg" alt="">
        <img class="btn img10" src="img/10.jpg" alt="">
        <img class="btn img11" src="img/11.jpg" alt="">
        <img class="btn img12" src="img/12.jpg" alt="">
    </div>
</body>
</html>

CSS代码：

*{
    margin: 0px;
    padding: 0px;
}
body{
    background: #fdfddd;
}
.contenter{
    width: 80%;
    margin: 10px auto;
    position: relative;
}
.btn{
    width: 180px;
    padding: 10px;
    margin: 3px auto;
    background: white;
    box-shadow: 5px 3px 5px 2px #888888;;
    border: 1px solid gainsboro;
    z-index: 1;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.contenter img:hover{
    z-index: 2;
    position: relative;
    box-shadow: 15px 15px 20px rgba(50,50,50,0.4);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    width:auto;
    height:auto;
}
.img1{
    transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
}
.img2{
    transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
}
.img3{
    transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
}
.img4{
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}
.img5{
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}
.img6{
    transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
}
.img7{
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
}
.img8{
    transform: rotate(-35deg);
    -webkit-transform: rotate(-35deg);
}
.img9{
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}
.img10{
    transform: rotate(11deg);
    -webkit-transform: rotate(11deg);
}
.img11{
    transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
}
.img12{
    transform: rotate(18deg);
    -webkit-transform: rotate(18deg);
}