Vue はクリックフリップ効果を実現します

//html コード テスト デモの名前はランダムにコピーされました <div class="Demo">
        <div class="Before" :class="isTop ? 'contain-Before' : ''" @click="handleBefore"></div>
        <div class="After" :class="isTop ? 'contain-After' : ''" @click="handleAfter" style="font-size:20px;color:black">これは裏面のコンテンツです</div>
    </div>

//データにisTop:falseを定義する

//メソッドのhandleBefore()メソッド{
  if(!this.isTop){
         this.isTop = true
     }
 },
 ハンドル後(){
     if(this.isTop){
         this.isTop = false
     }
 }

//css
。デモ{
    幅: 375ピクセル;
    高さ: 300px;
    上マージン: 50px;
    /* 左マージン: 500px; */
    位置: 相対的;
    パースペクティブ: 800px;
    ボックスのサイズ: 境界線ボックス;
    
    
}
。前に{
    幅: 100ピクセル;
    高さ: 200px;
    位置: 絶対;
    トップ:0;
    左: 0;
    背景繰り返し: 繰り返しなし;
    背景の位置: 中央 中央;
    背面の可視性: 非表示;
    遷移: 1.5 秒;
    背景画像:url('../assets/images/chunfen4.jpg');
    border:1px 実線の黄色;
 
}
。後{
    幅: 100ピクセル;
    高さ: 200px;
    位置: 絶対;
    トップ:0;
    左: 0;
    色: #fff;
    背景色:#fff;
    テキストインデント: 2em;
    変換: rotateY(-180deg);
    背面の可視性: 非表示;
    遷移: 1.5 秒;
    border:1px 実線の黄色;
}
.Demo .contain-Before{
    変換: rotateY(180deg);
}
.Demo .contain-After{
    変換: rotateY(0deg);
}