纯CSS实现 | 掘金照片墙

<div class="box">
    <img class="img1" src="https://p9-passport.byteacctimg.com/img/user-avatar/e3a142ceef01d6d640ac417a16f127f6~300x300.image">
    <img class="img2" src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/mirror-assets/168e0858b6ccfd57fe5~tplv-t2oaga2asx-no-mark:180:180:180:180.awebp" >
    <img class="img3" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cc94bddd46584710a0bb0ebb53f070c3~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp" >
    <img class="img4" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/de2ab00b319c4da780c2c9442356a2b2~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?">
    <img class="img5" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/26c13483395945ab9d72d893fc4bb395~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp?" >
    <img class="img6" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7a026d003fe5445bbffb781a1cf24c92~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?" >
</div>

body {
    background-color: #F5F5DC;
}
.box  {
    margin: auto;
    width: 1000px;
    height: 90vh;
    position: relative;
}
.box img {
    border: 1px solid white;
    padding: 10px;
    width: 300px;
    box-shadow: 1px 1px 5px #666;
    border-radius: 10px;
    transition: all 1s;
}
.box img:hover {
    transform: scale(1.5,1.5);
    z-index: 1;
}
.img1 {
    position: absolute;
    top: 100px;
    left: 300px;
    transform: rotate(45deg);
}
.img2 {
    position: absolute;
    top: 248px;
    left: 142px;
    transform: rotate(-25deg);
}
.img3 {
    position: absolute;
    top: 97px;
    left: 472px;
    transform: rotate(15deg);
}
.img4 {
    position: absolute;
    top: 280px;
    left: 531px;
    transform: rotate(-65deg);
}
.img5 {
    position: absolute;
    top: 133px;
    left: 93px;
    transform: rotate(40deg);
}
.img6 {
    position: absolute;
    top: 393px;
    left: 318px;
    transform: rotate(-30deg);
}