记录一个移动端图片预览（支持旋转），使用css强制旋转的坑

注：我并没有解决 只是换了一个插件,记录一下问题
1、需求要支持图片预览和旋转 ，
<1>我选择是vant组件自带的ImagePreview 图片预览，用的css强制实现旋转，
<2>出现的问题是 样式可以旋转 但是 touch事件没有旋转，
<3>导致现象是，旋转后 放大后滑动图片，向右滑动-图片向下偏移，左-上，上-右，下-左。
<4>搜索一下答案 解决办法是： 判断touch事件移动方向 手动设置想要的偏移位置，但是我没有实现。
<5>最后改为使用viewer.js实现需求功能
<6>ImagePreview 实现图片预览的代码

点击查看代码

<van-image-preview  :loop="swipePlayState==='2'?true:false" :start-position = "current" ref="imagePreview"  :min-zoom="1/3" class="preview_box" v-model:show="show" :images="images" @change="handleChange">
			<template v-slot:index>
				<div class="image_preview_box" :style="{top:(clientHdetail - 50 )  + 'px'}">
					<div class="preview-indicator">{{ indexPreview + 1 }}/{{ images.length }}</div>
					<div class="preview_rotate" @click="hanleRotate('旋转')" style="color:red">
						<img src="@/assets/img/taskList/xuanzhuan@2x.png" alt="">
					</div>
					<span class="preview_close" @click="hanleClose">退出全屏</span>
					<div :style="{top: - (clientHdetail/2 - 28) + 'px'}" class="preview_left" @click="handleSwipePreview('prev')">
						<img src="@/assets/img/examList/prev.png" alt="">
					</div>
					<div :style="{top: - (clientHdetail/2 - 28) + 'px'}" class="preview_right" @click="handleSwipePreview('next')">
						<img src="@/assets/img/examList/next.png" alt="">
					</div>
				</div>
			</template>
		</van-image-preview>