Vueはカードフリップ効果を実現します

<テンプレート>
<div id="try">
 <!-- box_rolling で前方宙返りアニメーションを実行します-->
<div class="rollbox" :class="{'box_rolling':isRolling}" @click="isRolling = !isRolling">
 <!-- 前面の div -->
 <div class="rollbox_front">
  <div class="contentbox">
   <img src="@/assets/images/s1.png"/>
  </div>
 </div>
 <!-- 次の div -->
 <div class="rollbox_behind">
  <div class="contentbox">
   <img src="@/assets/images/s2.png"/>
  </div>
 </div>
</div>
</div>
</テンプレート>
<スクリプト>

エクスポートデフォルト{
 名前:'試してみる',
 データ（）{
  戻る {
   ローリング:false
  }
 }
}
</スクリプト>
<スタイル lang='scss'>
＃試す{
 .ロールボックス{
  位置: 相対的;
     パースペクティブ: 1000px;
  幅:200px;
  高さ: 400px;
  マージン:100px 自動;

    ＆_フロント、
    ＆_後ろに{
   transform-style: preserve-3d; //すべての子要素が3D空間に表示されることを示します backface-visibility: hidden; //背面が画面を向いているときに要素が表示されるかどうか transition-duration: .5s;
     遷移タイミング関数:'ease-in';
   背景:#008080;
   .コンテンツボックス{
    幅:200px;
    高さ: 400px;
    ディスプレイ: フレックス;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
    >画像{
     幅:100ピクセル;
    }
   }
    }
    ＆_後ろに{
      変換: rotateY(180deg);
      visibility:hidden; //要素は非表示ですが、スペースを占有します。position: absolute;
      トップ:0;
      下:0;
      右: 0;
      左: 0;
    }
 }
 .box_rolling{
    .rollbox_front{
      変換: rotateY(180deg);
      可視性:非表示;
    }
    .rollbox_behind{
      変換: rotateY(360deg);
      可視性: 表示可能;
    }
  }
}
</スタイル>