要使用CSS实现图片的3D旋转效果，可以使用CSS3的transform属性中的rotateY函数来实现Y轴的旋转，以及perspective属性来设置3D效果的视距。下面是一个简单的实现图片墙的示例代码：
HTML:
<div class="photo-wall">
<img class="photo" src="image1.jpg" alt="Image 1">
<img class="photo" src="image2.jpg" alt="Image 2">
<img class="photo" src="image3.jpg" alt="Image 3">
<!-- 更多图片 -->
</div>CSS:
.photo-wall {
perspective: 800px; /* 设置视距，增加3D效果 */
width: 300px; /* 设置照片墙的宽度 */
height: 200px; /* 设置照片墙的高度 */
position: relative; /* 相对定位，方便子元素绝对定位 */
margin: 0 auto; /* 居中显示 */
}
.photo {
position: absolute;
width: 100%; /* 让每张照片充满照片墙的宽度 */
height: 100%; /* 让每张照片充满照片墙的高度 */
backface-visibility: hidden; /* 隐藏背面，避免在旋转时看到图片的背面 */
transition: transform 1s; /* 设置过渡动画，完成旋转需要1秒 */
}
.photo:nth-child(1) {
transform: rotateY( 0deg) translateZ(320px);
}
.photo:nth-child(2) {
transform: rotateY( 90deg) translateZ(320px);
}
.photo:nth-child(3) {
transform: rotateY(180deg) translateZ(320px);
}
/* 更多图片的旋转设置 */JavaScript (用于旋转图片):
const photoWall = document.querySelector('.photo-wall');
let currentPhoto = 0;
function rotatePhotos(direction) {
const totalPhotos = document.querySelectorAll('.photo').length;
currentPhoto = (currentPhoto + (direction === 'right' ? 1 : -1) + totalPhotos) % totalPhotos;
document.querySelectorAll('.photo').forEach((photo, index) => {
const angle = (360 / totalPhotos) * index - (360 / totalPhotos) * currentPhoto;
photo.style.transform = `rotateY(${angle}deg) translateZ(320px)`;
});
}
// 监听左右键来旋转照片
photoWall.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') rotatePhotos('left');
else if (e.key === 'ArrowRight') rotatePhotos('right');
});在上述代码中，.photo-wall 是照片墙的容器，.photo 是每张照片的类。通过JavaScript代码，可以监听左右方向键的动作来控制旋转照片墙中的照片。每张照片都是绝对定位在照片墙上，并且初始化时都旋转到了它们自己的位置。当用户按下左或右箭头键时，所有的照片会一起旋转到新的位置。这个简单的示例只是旋转照片墙的一个基本实现，你可以根据需要添加更多的功能，比如自动播放，或者增加交互细节。