vue 中3D旋转相册如何围绕一张图片旋转

要实现这个功能，可以借助 CSS3 的 3D 变换和 Vue 的渲染模板来实现。

首先，我们需要一个父容器来包含所有的图片，并设置为 `perspective` 模式，以便观察者可以看到所有图像的 3D 效果。然后，我们为每个子元素（即每张图片）创建一个子容器，并应用 `transform-style: preserve-3d;` 属性来使其具有 3D 效果。

接下来，我们需要使用 Vue 的渲染模板来循环遍历所有的图片，并动态地为每个子容器应用旋转变换。这可以通过计算属性或方法来实现，具体取决于你的实现方式。

例如，以下代码演示了如何使用 Vue 和 CSS3 创建一个基本的 3D 相册效果：

<template>
  <div class="album">
    <div class="album__wrapper" :style="wrapperStyles">
      <div class="album__item" v-for="(item, index) in items" :key="index" :style="itemStyles(index)">
        <img :src="item.src" :alt="item.alt">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { src: 'image1.jpg', alt: 'Image 1' },
        { src: 'image2.jpg', alt: 'Image 2' },
        { src: 'image3.jpg', alt: 'Image 3' },
        { src: 'image4.jpg', alt: 'Image 4' },
        { src: 'image5.jpg', alt: 'Image 5' }
      ],
      currentIndex: 0
    }
  },
  computed: {
    wrapperStyles() {
      return {
        transform: `rotateY(${this.currentIndex * -60}deg)`
      }
    }
  },
  methods: {
    itemStyles(index) {
      const distance = 200;
      const angle = index * 60;
      const transform = `rotateY(${angle}deg) translateZ(${distance}px)`;

      return {
        transform
      }
    }
  }
}
</script>

<style scoped>
.album {
  perspective: 1000px;
  height: 400px;
}

.album__wrapper {
  display: flex;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

.album__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  margin: 0 10px;
  transform-origin: center center;
  transition: transform 0.5s ease-in-out;
}

.album__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

在这个示例中，我们使用 `currentIndex` 属性来跟踪当前选定的图片，根据它来计算父容器（`.album__wrapper`）的旋转角度。我们还使用 `itemStyles()` 方法来计算每个子容器（`.album__item`）的旋转和位移变换。最后，我们使用 CSS 样式来定义每个元素在 3D 空间中的位置和动画效果。

你可以根据自己的需求进行修改和扩展。