Why aren't my CSS rules being applied to flip an image?

Question

I have an app that has a two-sided HTML element. When a user clicks a button, I want to "flip" the element. I've been trying to get it to work as shown here . That example includes the following HTML, CSS, and JavaScript.

HTML

<div id="myApp">
  <div class="flip-card">
    <div class="flip-card-inner">
      <div :class="{ 'flip-card-front':true, 'flipped':!isFlipped }">Side A</div>
      <div :class="{ 'flip-card-back':true, 'flipped':isFlipped }">Side B</div>
    </div>
  </div>

  <button @click="onButtonClick">Flip</button>
</div>

CSS

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform: rotateY(180deg);
  
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flipped {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

JavaScript

const MyApp = {
  data() {
    return {
      isFlipped: false
    }
  },
  
  methods: {
    onButtonClick() {
      this.isFlipped = true;
    }
  }
}

Vue.createApp(MyApp).mount('#myApp');

There doesn't appear to be any errors. It's just not behaving as I'd expect. Everything looks correct. How do I get the card to flip when someone clicks the button?

UPDATE This example cleared it up.

Answer 1

Your class is being applied as expected, but you have a CSS specificity problem.

Increase specificity like this:

.flip-card-front.flipped {
  transform: rotateY(180deg);
}

Answer 2

Try to replace below code.

this.isFlipped = true;

To

this.isFlipped = !this.isFlipped;