Vue realisiert den Card-Flip-Effekt

<Vorlage>
<div id="versuchen">
 <!-- Führen Sie eine Frontsalto-Animation unter Boxrolling aus-->
<div Klasse="rollbox" :Klasse="{'box_rolling':isRolling}" @click="isRolling = !isRolling">
 <!-- vorderes div -->
 <div Klasse="rollbox_front">
  <div Klasse="Inhaltsbox">
   <img src="@/assets/images/s1.png"/>
  </div>
 </div>
 <!-- nächstes div -->
 <div Klasse="rollbox_behind">
  <div Klasse="Inhaltsbox">
   <img src="@/assets/images/s2.png"/>
  </div>
 </div>
</div>
</div>
</Vorlage>
<Skript>

Standard exportieren{
 Name: 'versuchen',
 Daten(){
  zurückkehren {
   isRolling:false
  }
 }
}
</Skript>
<style lang='scss'>
#versuchen{
 .rollbox{
  Position: relativ;
     Perspektive: 1000px;
  Breite: 200px;
  Höhe: 400px;
  Rand: 100px automatisch;

    &_Front,
    &_hinter{
   transform-style: preserve-3d; //Zeigt an, dass alle untergeordneten Elemente im 3D-Raum dargestellt werden backface-visibility: hidden; //Gibt an, ob das Element sichtbar ist, wenn die Rückseite zum Bildschirm zeigt transition-duration: .5s;
     Übergangs-Timing-Funktion: „Ease-In“;
   Hintergrund: #008080;
   .contentbox{
    Breite: 200px;
    Höhe: 400px;
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    >img{
     Breite: 100px;
    }
   }
    }
    &_hinter{
      transformieren: Y-Drehung (180 Grad);
      Sichtbarkeit:versteckt; //Das Element ist unsichtbar, nimmt aber Platz ein Position: absolute;
      oben: 0;
      unten: 0;
      rechts: 0;
      links: 0;
    }
 }
 .box_rolling{
    .rollbox_front{
      transformieren: Y-Drehung (180 Grad);
      Sichtbarkeit: versteckt;
    }
    .rollbox_behind{
      transformieren: Y-Drehung (360 Grad);
      Sichtbarkeit: sichtbar;
    }
  }
}
</Stil>