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