要使用 JavaScript 实现 Div 的旋转和展开以显示网格图库，可以使用 CSS 过渡和动画来实现。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grid-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.grid-item {
position: relative;
overflow: hidden;
transition: all 0.5s ease;
}
.grid-item:hover {
transform: rotate(45deg);
}
.grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.grid-item:hover img {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="grid-gallery">
<div class="grid-item">
<img src="image1.jpg" alt="">
</div>
<div class="grid-item">
<img src="image2.jpg" alt="">
</div>
<div class="grid-item">
<img src="image3.jpg" alt="">
</div>
<div class="grid-item">
<img src="image4.jpg" alt="">
</div>
<div class="grid-item">
<img src="image5.jpg" alt="">
</div>
<div class="grid-item">
<img src="image6.jpg" alt="">
</div>
<div class="grid-item">
<img src="image7.jpg" alt="">
</div>
<div class="grid-item">
<img src="image8.jpg" alt="">
</div>
</div>
</body>
</html>在上述代码中，我们使用了 CSS 过渡和动画来实现 Div 的旋转和展开效果。首先，我们定义了一个网格图库，其中每个网格项的宽度为 1/4 屏幕宽度，并且使用了grid-gap属性来设置网格项之间的间隔。然后，我们为每个网格项设置了一个position: relative属性，以便我们可以使用transform属性来旋转和缩放图片。接下来，我们使用transition属性来设置过渡效果，当鼠标悬停在网格项上时，图片会在 0.5 秒内逐渐旋转 45 度，并在 0.5 秒内逐渐缩放 1.2 倍。最后，我们使用img元素来显示图片，并使用object-fit: cover属性来确保图片在网格项中自适应填充。
