-1

I have an image which is basically is on overlay and I want to rotate the image in all the directions using css and vue js.

I have a codepen written by me which will help you understand of what I am doing and below I have posted the code

<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>

Below is the css I am using

.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);
  }
}

And finally my vuejs code

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

Below is my code pen link

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

1 Answer 1

8

I think that the best way to do this is to directly apply your rotation to a bound style tag. See below for an example

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>

Or codepen: https://codepen.io/anon/pen/ardLdQ

1
  • If this answers your question please accept the answer as such by clicking that checkmark on the left side :)
    – Frank
    May 11, 2019 at 20:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.