CSS转换转换问题

我试图实现一个翻转卡菜单只使用HTML和CSS。这几乎完成了，只是当接收到第一个悬停状态时，卡的背面需要时间来显示。这是一种仅在90度时进行平滑过渡移动，然后立即显示最终结果（在最后90度时不再进行平滑过渡）

在第一次盘旋之后，一切都很顺利

有什么建议吗

编辑：下面的代码段已编辑为适合正确答案

@导入url（'https://fonts.googleapis.com/css?family=Open+Sans:400700&display=swap'）；
梅因先生{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
字体系列：“开放式Sans”，无衬线；
背景色：#000；
}
.标题{
颜色：白色；
字号：2vh；
边缘底部：2vh；
}
.标题a{
文字装饰：无；
颜色：白色；
字体大小：粗体；
}
.卡片{
背景色：透明；
宽度：30vh；
高度：50vh；
透视图：1000px；
透视原点：中心；
右边距：0.5vh；
}
.card>.card容器{
位置：相对位置；
宽度：100%；
身高：100%；
转换：1s转换容易；
变换样式：保留-3d；
背景色：透明；
}
.card:hover>.card容器{
变换：旋转（180度）；
}
.card container>.front、.card container>.back{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
}
.card container>.front{
背景图像：线性渐变（至右下角，红色，黄色）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：0.5vh；
颜色：白色；
字体大小：3vh；
光标：指针；
背面可见性：隐藏；
}
.card container>.back{
背景色：透明；
颜色：白色；
字体大小：3vh；
变换：旋转（180度）；
光标：指针；
}
.back>ul{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
列表样式：无；
填充：0；
保证金：0；
宽度：100%；
身高：100%；
透视图：1000px；
透视原点：中心；
}
.back>ul>li{
文本对齐：居中；
高度：计算（100%-（0.2vh*4）/5）；
宽度：100%；
转换：1s转换容易；
变换样式：保留-3d；
}
.back>ul>li:不是（：最后一个孩子）{
边际下限：0.2vh；
}
.back>ul>li>.child-front、.back>ul>li>.child-back{
背面可见性：隐藏；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
边界半径：0.5vh；
}
.back>ul>li>.child front{
背景图像：线性渐变（左下角，红色，橙色）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.back>ul>li>.child back{
背景颜色：橙色；
变换：rotateX（180度）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.back>ul>li:悬停{
变换：rotateX（180度）；
}
.儿童后跨，.儿童前跨{
颜色：白色；
显示：块；
}
.儿童背跨{
字体大小：粗体；
}

找到我
在这里盘旋


在这里盘旋
项目1


在这里盘旋
项目2


在这里盘旋
项目3


在这里盘旋
项目4


在这里盘旋
项目5

删除

背面可见性：隐藏：

.card-container > .front,.card-container > .back {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
}

它实际上会旋转
180度
，但由于
背面可见性
的原因，您看不到整个变换。它显示了旋转完成后的情况。
谢谢您的帮助。现在，它是有意义的。