Flip翻转动画在Vue里怎么实现前后两面内容切换？

技术迁迁提问于 2026-03-01 00:37:23 阅读 18

组件

我用Vue写了个卡片翻转组件，想点击时翻面显示背面内容，但加了transform: rotateY(180deg)后背面文字是反的，而且点一下就闪回正面了，根本没法看。

试过给背面加rotateY(180deg)抵消，也设置了backface-visibility: hidden，但还是不对。这是我的关键代码：

<div class="card" @click="isFlipped = !isFlipped">
  <div class="front">正面</div>
  <div class="back">背面</div>
</div>

CSS里用了transition和perspective，但效果很奇怪，求指点哪里错了？

我来解答赞 10 收藏

反馈

1 条解答

A. 岳阳 Lv1

你这个问题典型的结构没搞对。翻转的核心是：正面背面要绝对定位重叠，背面预先rotateY(180deg)，翻转动画加在容器上，不是加在正背面上。

直接看代码：

关键点就仨：perspective放外层容器，transform-style: preserve-3d放card上，背面预先翻转180度等着。你之前应该是翻转加错位置了。

2026-03-01 05:04