如何使用css和javascript使引导卡翻转并保持翻转状态？
我正在使用Vue、css和JavaScript。当我按下按钮时，我可以让一张特定的卡片翻转，但理想的行为是，当按下按钮（不按住）时，卡片翻转并露出卡片的背面，然后从背面按下按钮，您可以再次将卡片翻转到正面。我曾尝试仅使用Vue和css实现此功能，但无法实现，因此我决定使用普通Javascript并使用如何使用css和javascript使引导卡翻转并保持翻转状态？,javascript,html,css,css-selectors,vuejs2,Javascript,Html,Css,Css Selectors,Vuejs2,我正在使用Vue、css和JavaScript。当我按下按钮时，我可以让一张特定的卡片翻转，但理想的行为是，当按下按钮（不按住）时，卡片翻转并露出卡片的背面，然后从背面按下按钮，您可以再次将卡片翻转到正面。我曾尝试仅使用Vue和css实现此功能，但无法实现，因此我决定使用普通Javascript并使用onclickevent。我有种直觉，是我的css导致了这个问题，但我已经做了很多实验，无法找到答案。如果您希望使用Vue、vanilla JavaScript和css，请提供帮助或建议。我对Vue
onclicknewvue({
el:#卡德萨普#，
数据：{
卡片：[]，
isFetchingData:false
},
已创建：函数（）{
this.isFetchingData=true；
让vm=这个；
axios.get（“http://localhost:52007/api/cards")
。然后（响应=>{
vm.cards=response.data.slice（）
vm.isFetchingData=false；
})
}
})。卡片标题{
字体系列：getSchwifty，无衬线；
字体大小：1.6rem；
颜色：绿黄色；
文本对齐：居中；
}
.卡片文本{
字号：1.2rem；
}
#加载img{
边际下限：30V分钟；
}
.卡片翻转{
-webkit透视图：1000px；
透视图：1000px；
}
.card-flip:active.flip、.card-flip.active.flip{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.卡片翻转，
.前线，
.回来{
宽度：100%；
身高：38雷姆；
}
.翻转{
过渡：0.6s；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
位置：相对位置；
}
.前线，
.回来{
-webkit背面可见性：隐藏；
背面可见性：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
.前线{
z指数：2；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
.回来{
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
壁球卡片
{{card.frontText}
卡号{{Card.id}
把这个袋子翻回去！
壁球卡片
{{card.backText}
卡号{{Card.id}
把这个袋子翻回去！
函数isFlipped（）{
document.querySelector（“.card flip”）.classList.toggle（“flip”）；
console.log（'insideisflipped函数'）
}