当前位置：首页 > VUE

vue图片实现旋转

2026-03-28 21:55:13VUE

实现图片旋转的方法

使用CSS transform属性

在Vue中可以通过绑定style或class实现图片旋转。定义一个数据属性存储旋转角度，通过点击事件修改角度。

<template>
  <div>
    <img 
      :src="imageUrl" 
      :style="{ transform: `rotate(${rotateDegree}deg)` }" 
      @click="rotateImage"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/image.jpg',
      rotateDegree: 0
    }
  },
  methods: {
    rotateImage() {
      this.rotateDegree += 90
    }
  }
}
</script>

使用CSS动画实现连续旋转

需要实现无限旋转效果时，可以定义CSS动画关键帧。

<template>
  <div>
    <img 
      :src="imageUrl" 
      class="rotating-image" 
    />
  </div>
</template>

<style>
.rotating-image {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

结合transition实现平滑过渡

添加transition属性使旋转更平滑。

<template>
  <div>
    <img 
      :src="imageUrl" 
      :style="{ transform: `rotate(${rotateDegree}deg)` }" 
      class="transition-image"
      @click="rotateImage"
    />
  </div>
</template>

<style>
.transition-image {
  transition: transform 0.5s ease;
}
</style>

使用第三方动画库

安装vue-use-gesture等库实现拖拽旋转等高级交互。

vue图片实现旋转

npm install @vueuse/gesture

<template>
  <div>
    <img 
      :src="imageUrl" 
      v-bind="bind()"
      :style="{ transform: `rotate(${rotate}deg)` }"
    />
  </div>
</template>

<script>
import { useDrag } from '@vueuse/gesture'

export default {
  setup() {
    const rotate = ref(0)
    const bind = useDrag(({ movement: [mx] }) => {
      rotate.value = mx
    })

    return { bind, rotate }
  }
}
</script>