Vue realisiert Click-Flip-Effekt

//HTML-Code-Testdemo, Benennung zufällig kopiert <div class="Demo">
        <div Klasse="Vorher" :Klasse="isTop ? 'contain-Vorher' : ''" @click="handleVorher"></div>
        <div class="After" :class="isTop ? 'contain-After' : ''" @click="handleAfter" style="font-size:20px;color:black">Dies ist der hintere Inhalt</div>
    </div>

//Definiere isTop:false in Daten

//Methode handleBefore() in Methoden{
  wenn(!dies.istTop){
         dies.isTop = true
     }
 },
 handleAfter(){
     wenn(dies.istTop){
         this.isTop = false
     }
 }

// CSS
.Demo{
    Breite: 375px;
    Höhe: 300px;
    Rand oben: 50px;
    /* Rand links: 500px; */
    Position: relativ;
    Perspektive: 800px;
    Box-Größe: Rahmenbox;
    
    
}
.Vor{
    Breite: 100px;
    Höhe: 200px;
    Position: absolut;
    oben: 0;
    links: 0;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundposition: Mitte Mitte;
    Rückseitensichtbarkeit: versteckt;
    Übergang: 1,5 s;
    Hintergrundbild: URL ('../assets/images/chunfen4.jpg');
    Rand: 1px, durchgehend gelb;
 
}
.Nach{
    Breite: 100px;
    Höhe: 200px;
    Position: absolut;
    oben: 0;
    links: 0;
    Farbe: #fff;
    Hintergrundfarbe: #fff;
    Texteinzug: 2em;
    transformieren: Y-Drehung (-180 Grad);
    Rückseitensichtbarkeit: versteckt;
    Übergang: 1,5 s;
    Rand: 1px, durchgehend gelb;
}
.Demo .contain-Before{
    transformieren: Y-Drehung (180 Grad);
}
.Demo .contain-After{
    transformieren: drehenY(0Grad);
}