Flip翻转动画怎么实现正反面无缝衔接？

我在做卡片翻转效果时，正面翻到背面总有闪一下或者错位的问题，明明加了backface-visibility: hidden，但还是不对劲。

这是我的CSS代码：

.card {
  perspective: 1000px;
}
.card-inner {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.card-inner.flipped {
  transform: rotateY(180deg);
}
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

正面和背面的div都用了.card-face类，但翻过去的时候背面内容会先闪现再翻，或者位置偏移，到底哪里漏了？