Html 如何使用css在所有方向上旋转图像

我有一个基本上是覆盖的图像，我想使用css和vue js在所有方向上旋转图像

我有一个由我写的代码笔，这将帮助你了解我在做什么，下面我已经张贴了代码

<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center image-rotation" :class="{rotateImageRight: right, rotateImageLeft: left }">
      <img src="https://picsum.photos/500/300" />
    </div>
    <v-btn @click="rotateRight"> rotate right </v-btn>
    <v-btn @click="rotateLeft"> rotate left </v-btn>

  </v-app>
</div>

最后是我的vuejs代码

new Vue({
  el: '#app',
  data () {
    return {
      right: false,
      left: false
    }
  },
  methods: {
   rotateRight() {
     this.right = !this.right
   },
    rotateLeft() {
      this.left = !this.left
    }
  }
})

下面是我的代码笔链接

---

我认为最好的方法是直接将旋转应用于绑定样式标记。请参见下面的示例

newvue({
el:“#应用程序”，
数据（）{
返回{
轮换：0，
}
},
方法：{
rotateRight（）{
这个旋转-=90
},
rotateLeft（）{
这个旋转+=90
}
}
})

向左旋转
右转

如果回答了您的问题，请单击左侧的复选标记接受答案：）

new Vue({
  el: '#app',
  data () {
    return {
      right: false,
      left: false
    }
  },
  methods: {
   rotateRight() {
     this.right = !this.right
   },
    rotateLeft() {
      this.left = !this.left
    }
  }
})