css滞后中的3d翻转div卡

Question

我试图制作一个效果，即卡的正面在Y轴上旋转，然后卡的背面出现，出于某种原因，当卡旋转时，它会在背面出现之前显示正面的内容一秒钟，为什么会发生这种情况？

.movie-card {
border-radius: 20px;
height: 400px;
width: 300px;
background-color: #FFE3D8;
box-shadow: 10px 10px 15px -15px #fff;  
transform: scale(1);
cursor: pointer;
transform-style: preserve-3d;
transition: all 600ms ;
transform: rotateY(180deg);
}
img {
width: 300px;
height: 400px;
border-radius: 20px;
}
.frontofcard,
.backofcard {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
}
.frontofcard {
z-index: 2;
backface-visibility: hidden;;
}
.backofcard {
color: #fff;
font-family: 'Nanum Gothic', sans-serif;
height: 100%;
width: 100%;
border-radius: 20px;
z-index: 1;
/* transform: rotateY(180deg); */
background: #343065;
}

.movie-card:hover {
opacity: 1;
transform: scale(1.07);
transform: rotateY(180deg);
}
.movie-card:not(:hover) {
opacity: 0.8;
transform: scale(0.9);

}

<div class="movie-card">
<div class="frontofcard">
<div class="image"><img src="https://www.tuppencemagazine.co.uk/wp-content/uploads/2019/12/The-Joker-DVD-and-Blu-ray-cover-art.jpg" alt="" srcset=""></div>
</div>
<div class="backofcard">
<!-- <div class="title">
<div class="tag-box">
</div>
</div> -->
</div>
</div>
<!--

我希望我把我的问题弄清楚了，我试图实现的是，当卡片在悬停时旋转时，立即将卡片的背面移到正面，这样只要我悬停在卡片上，卡片的正面就会在背面。

Answer 1

悬停.movie-card:hover .frontofcard {opacity: 0;}后更改前卡的不透明度。但我们不希望它一旦悬停发生&同样也不晚，我在两张卡上都添加了转换transition: all 300ms;，我选择300，因为你的翻转动画是600毫秒，所以我认为300毫秒会很好。但你可以乱折腾，直到你找到最佳时机

.movie-card {
border-radius: 20px;
height: 400px;
width: 300px;
background-color: #FFE3D8;
box-shadow: 10px 10px 15px -15px #fff;
transform: scale(1);
cursor: pointer;
transform-style: preserve-3d;
transition: all 600ms linear;
transform: rotateY(180deg);
}
img {
width: 300px;
height: 400px;
border-radius: 20px;
}
.frontofcard,
.backofcard {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
transition: all 300ms;  /*I Added*/

}
.frontofcard {
z-index: 2;
backface-visibility: hidden;

}
.backofcard {
color: #fff;
font-family: 'Nanum Gothic', sans-serif;
height: 100%;
width: 100%;
border-radius: 20px;
z-index: 1;
/* transform: rotateY(180deg); */
background: #343065;
}
.movie-card:hover {
opacity: 1;
transform: scale(1.07);
transform: rotateY(180deg);
}
.movie-card:hover .frontofcard {   /*I Added*/
opacity: 0;                      /*I Added*/
}
.movie-card:not(:hover) {
opacity: 0.8;
transform: scale(0.9);
}

<div class="movie-card">
<div class="frontofcard">
<div class="image"><img src="https://www.tuppencemagazine.co.uk/wp-content/uploads/2019/12/The-Joker-DVD-and-Blu-ray-cover-art.jpg" alt="" srcset=""></div>
</div>
<div class="backofcard">
<!-- <div class="title">
<div class="tag-box">
</div>
</div> -->
</div>
</div>
<!--