css实现图片的3d旋转-照片墙

要使用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代码，可以监听左右方向键的动作来控制旋转照片墙中的照片。每张照片都是绝对定位在照片墙上，并且初始化时都旋转到了它们自己的位置。当用户按下左或右箭头键时，所有的照片会一起旋转到新的位置。这个简单的示例只是旋转照片墙的一个基本实现，你可以根据需要添加更多的功能，比如自动播放，或者增加交互细节。