<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>照片墙</title><style>body {display: flex;justify-content: center;align-items: center;background-color: #f0f0f0;}.photo-wall {background-color: antiquewhite;padding: 60px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);display: flex table-column;justify-content: center;margin-top: 30px;}.tit {text-align: center;width: 100%;font-size: larger;}.photo {width:110px;margin: -5px;transition: transform 0.5s;cursor: pointer;border: 5px solid white;}#img1{transform: rotate(-10deg);}#img2 {transform: rotate(8deg);}#img3{transform: rotate(-6deg);}#img4{transform: rotate(10deg);}#img5 {transform: rotate(-8deg);}#img1:hover {transform: rotate(0deg) scale(1.3);}#img2:hover {transform: rotate(0deg) scale(1.3);}#img3:hover {transform: rotate(0deg) scale(1.3);}#img4:hover {transform: rotate(0deg) scale(1.3);}#img5:hover {transform: rotate(0deg) scale(1.3);}</style>
</head>
<body><div class="photo-wall"><div class="tit">照片墙</div><div class="box"><img src="C:\Users\Ghost\Desktop\Web\1713942115636.jpg" class="photo" id="img1"><img src="C:\Users\Ghost\Desktop\Web\Image_1711450117523.jpg" class="photo" id="img2"><img src="C:\Users\Ghost\Desktop\Web\Image_1711450126632.jpg" class="photo" id="img3"><br><img src="C:\Users\Ghost\Desktop\Web\Image_1711450173275.jpg" class="photo" id="img4"><img src="C:\Users\Ghost\Desktop\Web\mmexport1711450780605.jpg" class="photo" id="img5"></div></div>
</body>
</html>效果图
旋转属性参考博客：css元素转换(旋转函数、rotateX 和 rotateY 的使用、移动函数、缩放函数、过渡、动画)详解_css rotate-CSDN博客
