<!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博客