旋转图片序列帧，实现3d效果

<template>
  <div class="carousel-container">
    <div class="carousel-inner" @touchstart="handleTouchStart" @touchmove="handleTouchEnd">
      <div class="carousel-item" v-for="(item, index) in imgList" :key="index" :style="{ transform: `translateY(${currentIndex * -100}vh)` }">
        <image :src="item" mode="aspectFit">
      </div>
    </div>
  </div>
</template>

<script>
	export default {
		props:{
			vrUrl: {
				type: String,
				default: '',
			}
		},
	data() {
		return {
			currentIndex: 0,
			startY: 0,
			imgList: [
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/398/w1200_yichecar_202403187609076049839873298.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/669/w1200_yichecar_202403187589076049666947865.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/34/w1200_yichecar_202403187585076049603490249.png.webp',
				'https://img5.bitautoimg.com/usercenter/autoalbum/files/20240318/151/w1200_yichecar_202403187583076049515193137.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/608/w1200_yichecar_202403187588076049660826881.png.webp',
				'https://img6.bitautoimg.com/usercenter/autoalbum/files/20240318/317/w1200_yichecar_202403187587076049631734712.png.webp',
				'https://img6.bitautoimg.com/usercenter/autoalbum/files/20240318/577/w1200_yichecar_202403187595076049757718577.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/608/w1200_yichecar_202403187598076049760827379.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/724/w1200_yichecar_202403187614076049872402611.png.webp',
				'https://img6.bitautoimg.com/usercenter/autoalbum/files/20240318/822/w1200_yichecar_202403187602076049782293662.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/542/w1200_yichecar_202403187612076049854242422.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/978/w1200_yichecar_202403187616076049897817991.png.webp',
				'https://img5.bitautoimg.com/usercenter/autoalbum/files/20240318/598/w1200_yichecar_202403187597076049759899573.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/73/w1200_yichecar_202403187606076049807382262.png.webp',
				'https://img5.bitautoimg.com/usercenter/autoalbum/files/20240318/475/w1200_yichecar_202403187610076049847510996.png.webp',
				'https://img6.bitautoimg.com/usercenter/autoalbum/files/20240318/376/w1200_yichecar_202403187594076049737618543.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/719/w1200_yichecar_202403187613076049871908867.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/580/w1200_yichecar_202403187596076049758079495.png.webp',
				'https://img5.bitautoimg.com/usercenter/autoalbum/files/20240318/38/w1200_yichecar_202403187605076049803890331.png.webp',
				'https://img6.bitautoimg.com/usercenter/autoalbum/files/20240318/762/w1200_yichecar_202403187590076049676269700.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/123/w1200_yichecar_202403187592076049712305327.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/839/w1200_yichecar_202403187584076049583934834.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/139/w1200_yichecar_202403187586076049613909884.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/849/w1200_yichecar_202403187591076049684973293.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/120/w1200_yichecar_202403187607076049812099437.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/652/w1200_yichecar_202403187601076049765277090.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/535/w1200_yichecar_202403187611076049853567472.png.webp',
				'https://img5.bitautoimg.com/usercenter/autoalbum/files/20240318/873/w1200_yichecar_202403187604076049787340269.png.webp',
				'https://img6.bitautoimg.com/usercenter/autoalbum/files/20240318/25/w1200_yichecar_202403187617076049902545087.png.webp',
				'https://img5.bitautoimg.com/usercenter/autoalbum/files/20240318/648/w1200_yichecar_202403187600076049764865765.png.webp',
				'https://img5.bitautoimg.com/usercenter/autoalbum/files/20240318/764/w1200_yichecar_202403187615076049876448325.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/852/w1200_yichecar_202403187603076049785275632.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/87/w1200_yichecar_202403187618076049908713935.png.webp',
				'https://img6.bitautoimg.com/usercenter/autoalbum/files/20240318/645/w1200_yichecar_202403187599076049764549957.png.webp',
				'https://img7.bitautoimg.com/usercenter/autoalbum/files/20240318/367/w1200_yichecar_202403187608076049836782519.png.webp',
				'https://img8.bitautoimg.com/usercenter/autoalbum/files/20240318/280/w1200_yichecar_202403187593076049728035340.png.webp'
			],
			backList: [
				'https://customized-prod-bunket.oss-cn-shanghai.aliyuncs.com/assets/IMG_20230430_154939.jpg',
				'https://customized-prod-bunket.oss-cn-shanghai.aliyuncs.com/assets/IMG_20230318_104501.jpg',
				'https://customized-prod-bunket.oss-cn-shanghai.aliyuncs.com/assets/IMG_20221023_113706.jpg'
			]
		}
	},
	  computed: {
	    itemCount() {
	      return this.imgList.length;
	    },
	    containerHeight() {
	      return `${this.itemCount * 100}vh`;
	    }
	  },
	  methods: {
	    handleTouchStart(event) {
	      this.startY = event.touches[0].clientY;
	    },
	    handleTouchEnd(event) {
	      const endY = event.changedTouches[0].clientY;
	      const distance = endY - this.startY;
	
	      if (Math.abs(distance) > 0) {
	        if (distance > 0) {
							this.currentIndex = (this.currentIndex + 1) % this.itemCount;
	        } else {
						 if (Math.abs(distance) > 80) {
							 this.currentIndex = (this.currentIndex - 1 + this.itemCount) % this.itemCount
						 }
							 
	        }
	      }
	    }
	  }
	}
</script>

<style scoped lang="scss">
	.carousel-container {
	  height: 100vh;
	  overflow: hidden;
	}
	
	.carousel-inner {
	  position: relative;
	  height: v-bind(containerHeight);
	  transition: transform 0.3s ease-out;
	}
	
	.carousel-item {
		width: 100vh;
	  height: 100vh;
	
	}
	
	.carousel-item image {
	  width: 64vh;
	  height: 100vh;
		transform: rotate(90deg);
	}
</style>