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

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;