Rotating an image 90 degrees clock-wise but it goes counter clock-wise from 270 to 0-CodePudding

I have an image that I rotate 90 degrees every time I click on a button. However the issue is from 270 degree when I rotate it 90 degrees to go to 0 degree it rotates the other-way around!

Here is a sandbox of the issue: LINK

Anyone knows how to fix it so it always rotates clock-wise?

CodePudding user response：

Something like this works well IMO.

<template>
  <div>
    <img
      src="https://dummyimage.com/300x150/000/fff"
      :style="`transform: rotate(${90 * rotationNumbers}deg)`"
    />
    <button @click="rotationNumbers  ">ROTATE</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rotationNumbers: 0,
    }
  },
}
</script>

Rather than using classes that you toggle, you directly do that with some inline style. And to prevent the flip back, you continue spinning.
So it will go: 90, 180, 270, 360, 450, 540, 630, 720 etc...each time you click on the button.

There is no real difference between going back to 0 and continue incrementing this number (no performance penalty, bugs or alike) but the animation of course.