因此，我想添加一个卡翻转效果的一些卡，这应该在一个三维动画时，围绕y轴点击180度。在一边应该是一个问号图片，以涵盖卡的背面的内容，当你点击它应该转身，揭示背面。到目前为止，除了动画和牌面的变化，一切都工作。当我点击卡片时，它会在y轴上镜像自己，但它不会像卡片一样转动，也不会显示卡片的背面。如果有一个在类星体/vue方面有更多经验的人可以给予我一个提示或一些解释，告诉我如何得到想要的效果，我会很高兴。代码如下：

<template>
  <q-page class="page bg-brown-2 flex flex-center">
    <div class="canvas flex flex-center flex-wrap">
      <div v-for="(i,index) in numbers" :key="index" class="container">
        <div @click="e => e.target.classList.toggle('flip')" class="card">
          <div class="front">
            <q-img :src="require('../assets/question_mark.png')"/>
          </div>
          <div class="back">
            <q-img :src="require('../assets/pictures/' + i + '.png')"/>
          </div>
        </div>
      </div>
    </div>
  </q-page>
</template>
<script>

export default ({
  name: 'BigPicturePage',

  data() {
    return {

<!-- This is hardcoded now but will be generated through a loop that fills the array at the start. pls don´t hate ^^´ -->
      numbers: [359,358,357,356,355,354,353,352,351,350,349,348,347,346,345,344,343,342,341,340,339,338,337,336,335,334,333,332,331,330,329,328,327,326,325,324,323,322,321,320,319,318,317,316,315,314,313,312,311,310,309,308,307,306,305,304,303,302,301,300,299,298,297,296,295,294,293,292,291,290,289,288,287,286,285,284,283,282,281,280,279,278,277,276,275,274,273,272,271,270,269,268,267,266,265,264,263,262,261,260,259,258,257,256,255,254,253,252,251,250,249,248,247,246,245,244,243,242,241,240,239,238,237,236,235,234,233,232,231,230,229,228,227,226,225,224,223,222,221,220,219,218,217,216,215,214,213,212,211,210,209,208,207,206,205,204,203,202,201,200,199,198,197,196,195,194,193,192,191,190,189,188,187,186,185,184,183,182,181,180,179,178,177,176,175,174,173,172,171,170,169,168,167,166,165,164,163,162,161,160,159,158,157,156,155,154,153,152,151,150,149,148,147,146,145,144,143,142,141,140,139,138,137,136,135,134,133,132,131,130,129,128,127,126,125,124,123,122,121,120,119,118,117,116,115,114,113,112,111,110,109,108,107,106,105,104,103,102,101,100,99,98,97,96,95,94,93,92,91,90,89,88,87,86,85,84,83,82,81,80,79,78,77,76,75,74,73,72,71,70,69,68,67,66,65,64,63,62,61,60,59,58,57,56,55,54,53,52,51,50,49,48,47,46,45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1,0]
    }
  },

  methods: {
},

  }
)

</script>

<style>

.canvas {
  height: 77.5vh;
  width: 70%;
}

.container {
  width: calc(100%/24);
  height: calc(100%/15);
  perspective: 500px;
}

.card {
  position: relative;
  height: 100%;
  width: 100%;
  transition: transform 1500ms;
  transform-style: preserve-3d;
}

.front {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.back {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.flip{
  transform: rotateY(180deg);
}

</style>

我猜这个动画必须用一些Vue/Quasar的方式来做，导入一些类或属性来做一些花哨的动画，但是我没有足够的经验来获得正确的资源来实现确切的结构。