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类，但翻过去的时候背面内容会先闪现再翻，或者位置偏移，到底哪里漏了？
2 条解答
加个transform: rotateY(180deg)到背面卡片上就稳了。完整代码应该是这样：
原理很简单：背面卡片一开始就要是翻转状态，这样当父容器旋转180度时，它才能正确显示而不是闪现。用WordPress的话，插件可以直接用Elementor的翻转动画组件，但自己写CSS的话这个细节必须注意。
另外检查下你的卡片容器有没有设置绝对定位，以及z-index是否正确。有时候perspective值太小也会导致奇怪的渲染问题，可以试试调大点。
transform: rotateY(180deg)，让它一开始就背对观众，这样容器旋转180度时它正好正对观众。