vue图片实现旋转

在Vue中实现图片旋转

使用CSS transform属性

通过动态绑定CSS的transform属性实现旋转效果。在Vue组件的<style>中定义旋转动画，或通过动态绑定style实现。

<template>
  <img 
    :style="{ transform: `rotate(${rotateDegree}deg)` }" 
    src="your-image-path.jpg" 
    @click="rotateImage"
  />
</template>

<script>
export default {
  data() {
    return {
      rotateDegree: 0
    }
  },
  methods: {
    rotateImage() {
      this.rotateDegree += 90; // 每次点击旋转90度
    }
  }
}
</script>

使用CSS动画（持续旋转）

通过@keyframes定义无限旋转动画，适用于加载图标等场景。

<template>
  <img class="rotate-animation" src="loading-icon.png" />
</template>

<style>
.rotate-animation {
  animation: spin 2s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

使用第三方库（如GSAP）

对于复杂动画效果，可通过GSAP等动画库实现平滑旋转。

<template>
  <img ref="rotatableImg" src="image.jpg" />
</template>

<script>
import { gsap } from 'gsap';

export default {
  mounted() {
    gsap.to(this.$refs.rotatableImg, {
      rotation: 360,
      duration: 3,
      repeat: -1
    });
  }
}
</script>

注意事项

• 性能优化：频繁操作DOM元素时建议使用CSS硬件加速（添加will-change: transform）
• 过渡效果：可配合transition属性实现平滑旋转过渡
• 旋转中心点：默认绕中心旋转，可通过transform-origin调整（如transform-origin: left top）