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

Question

我有一个基本上是叠加的图像，我想使用 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>

下面是我使用的css

.image-rotation {
  &.rotateImageRight {
    transform: rotate(90deg);
  -ms-transform: rotate(90deg); 
  -webkit-transform: rotate(90deg); 
  }
  &.rotateImageLeft {
    transform: rotate(-90deg);
  -ms-transform: rotate(-90deg); 
  -webkit-transform: rotate(-90deg);
  }
}

最后是我的 vuejs 代码

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

下面是我的代码笔链接

https://codepen.io/waseem-khan-the-bold/pen/RmrZNY

Answer 1

我认为最好的方法是直接将旋转应用到绑定样式标签。请看下面的示例

new Vue({
  el: '#app',
  data () {
    return {
      rotation: 0,
    }
  },
  methods: {
   rotateRight() {
     this.rotation -= 90
   },
    rotateLeft() {
     this.rotation += 90
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app">
  <v-app id="inspire">
    <div class="text-xs-center" :style="`transform: rotate(${rotation}deg);`">
      <img src="https://picsum.photos/500/300" />
    </div>
    <v-btn @click="rotateLeft"> rotate left </v-btn>
    <v-btn @click="rotateRight"> rotate right </v-btn>
  </v-app>
</div>

或codepen：https://codepen.io/anon/pen/ardLdQ