How to make an circle infographic rotate - clockwise and counterclockwise - using buttons

Keywords: css vue.js vuetify.js image-rotation

Question: 

Sorry for the confusing title but I have no clue how to start.

I have a circle divided into 4 parts. each 1/4 is a step controlled by 4 buttons.

Everything is working but not the rotation. I can bind the classes to rotate when I click but it's only one-time rotation and one way.

Does anyone know how I can make it work in a correct way, rotating clockwise and counterclockwise according to the step button's / image position?

Illustrative image (plus 4 buttons above it - "step 01"; "step 02"; "step 03" and "step 04"):

enter image description here

I'm using Vuetify and Nuxt.js:

Controllers

<v-flex xs12>
  <div @click="step01()" class="controllers step01-controller" :class="{activeController:IsStep1}"></div>
  <div @click="step02()" class="controllers step02-controller" :class="{activeController:IsStep2}"></div>
  <div @click="step03()" class="controllers step03-controller" :class="{activeController:IsStep3}"></div>
  <div @click="step04()" class="controllers step04-controller" :class="{activeController:IsStep4}"></div>
</v-flex>


<v-flex xs12 sm12 md6>
  <v-img
  v-show="IsStep1"
  class="elevation-0"
  :class="{rotate90:IsStep1}"
  width="550px"
  :src="require('@/static/images/01.png')"
  ></v-img>
  <v-img
  v-show="IsStep2"
  class="elevation-0"
  :class="{rotate180:IsStep2}"
  width="550px"
  :src="require('@/static/images/02.png')"
  ></v-img>
  <v-img
  v-show="IsStep3"
  class="elevation-0"
  :class="{rotate270:IsStep3}"
  width="550px"
  :src="require('@/static/images/03.png')"
  ></v-img>
  <v-img
  v-show="IsStep4"
  class="elevation-0"
  :class="{rotate360:IsStep4}"
  width="550px"
  :src="require('@/static/images/.png')"
  ></v-img>
</v-flex>

JS

 data() {
    return {
      IsStep1: true,
      IsStep2: false,
      IsStep3: false,
      IsStep4: false,
      activeController: true,
    }
  },
  methods: {
    step01() {
      this.IsStep1 = true;
      this.IsStep2 = false;
      this.IsStep3 = false;
      this.IsStep4 = false;
    },
    step02() {
      this.IsStep1 = false;
      this.IsStep2 = true;
      this.IsStep3 = false;
      this.IsStep4 = false;
    },
    step03() {
      this.IsStep1 = false;
      this.IsStep2 = false;
      this.IsStep3 = true;
      this.IsStep4 = false;
    },
    step04() {
      this.IsStep1 = false;
      this.IsStep2 = false;
      this.IsStep3 = false;
      this.IsStep4 = true;
    },
  }

CSS

    .controllers{
      width: 50px;
      height:10px;
      position: relative;
      display: inline-block;
      margin-right: 10px;
      cursor: pointer;
    }

    .step01-controller{
      background-color: #345675;
      opacity: 0.4;
    }
    .step02-controller{
      background-color: #204957;
      opacity: 0.4;
    }
    .step03-controller{
      background-color: #146245;
      opacity: 0.4;
    }
    .step04-controller{
      background-color: #123123;
      opacity: 0.4;
    }

    .activeController{
      opacity: 1!important;
    }

    .rotate90{
      transform: rotate(-90deg);
    }

    .rotate180{
      transform: rotate(-180deg);
    }

.rotate270{
  transform: rotate(-270deg);
}

.rotate360{
  transform: rotate(-360deg);
}

Tks

Answers: