Javascript 我的圆形div在悬停时在翻转过程中卡住，我的两个div可以'；不要在悬停状态下越过底部潜水舱

我试图制作一个响应迅速的功能图，当我悬停时，它会翻转并显示信息。 所以我制作了这个维恩图，上面有三个圆形div，当我将鼠标悬停在其中一个div上时，它会放大并翻转，在另一侧显示信息。我在悬停时得到的是一个小车变换。我不知道在悬停时如何使翻转更平滑，因为现在我需要将光标放在特定区域上，这样圆才能完全翻转，而不会卡住。我尝试在“：hover”中使用边距和填充，但这并没有真正起作用，而且它看起来也太分散了。第二，当悬停在最上面的两个圆div上时，它们会放大（就像它们应该放大的那样），并且会在彼此上方移动，但不会在最下面的圆div上方移动。我尝试使用z-index和一个巨大的数字，但仍然无法使它在div上方移动。另外，在javascript上，我如何使其他圆圈在悬停时产生模糊

它应该看起来像我在figma上的原型。

这是我用来制作这个版本的维恩图的HTML、CSS和Javascript（不介意我如何格式化段落中的信息）

const circles=document.querySelectorAll（'.circle'）；
圆。forEach（（圆）=>{
circle.addEventListener（'mouseover'，（）=>{
removeActiveClasses（）；
circle.classList.add（'circleactive'）；
});
});
函数removeActiveClasses（）{
圆。forEach（（圆）=>{
circle.classList.remove（'circleactive'）；
});
}

\venu图{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
高度：355px；
左边距：自动；
右边距：自动；
}
#顶{
宽度：100%；
转化：translateX（0%）translateY（10%）；
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
#底部{
宽度：100%；
显示器：flex；
弯曲方向：立柱；
证明项目：中心；
对齐项目：居中；
位置：相对位置；
底部：24%；
/*转化：translateX（0%）translateY（-40%）*/
}
.圆圈{
宽度：220px；
高度：220px；
光标：指针；
盒影：3px4p4pRGBA（0,0,0,0.25）；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边界半径：50%；
}
.循环的{
宽度：260px；
高度：260px；
z指数：900；
过渡：1s轻松过渡；
}
.圆圈{
位置：相对位置；
z指数：999；
文本对齐：居中；
字体系列：Roboto；
字体风格：普通；
字号：900；
字体大小：24px；
线高：28px；
字母间距：0.1米；
颜色：rgba（255，255，255，1）；
文本阴影：5px4px4pxrgba（0,0,0,0.25），0px4px4prgba（0,0,0,0.25）；
}
#圆圈1{
背景：rgba（332182231）；
转化：translateX（25%）translateY（0%）；
变换样式：保留-3d；
转换：转换1s轻松；
}
#圆圈1：悬停{
变换：旋转（180度）；
}
.圆圈.侧面{
背面可见性：隐藏；
边界半径：6px；
身高：100%；
位置：绝对位置；
溢出：隐藏；
宽度：100%；
}
.侧面.圆圈3P{
变换：旋转（180度）；
显示器：flex；
证明内容：周围的空间；
}
#圆圈2{
背景：rgba（95216,21,78）；
转化：translateX（-25%）translateY（0%）；
变换样式：保留-3d；
转换：转换1s轻松；
}
#圆圈2：悬停{
变换：旋转（180度）；
}
#圆圈3{
背景：rgba（253,45,45,8）；
转化：translateX（0%）translateY（-10%）；
变换样式：保留-3d；
转换：转换1s轻松；
}
#圆圈3：悬停{
变换：旋转（180度）；
}
#圆圈1跨度{
保证金权利：50%；
字号：500；
字体大小：24px；
字母间距：0.1米；
颜色：#FFFFFF；
文本阴影：2px2p4pRGBA（1841841841840,0.70）；
背景滤镜：模糊（4px）；
}
#圆圈2跨度{
左边距：50%；
字号：500；
字体大小：24px；
字母间距：0.1米；
颜色：#FFFFFF；
文本阴影：2px2p4pRGBA（1841841841840,0.70）；
背景滤镜：模糊（4px）；
}
#圆圈3跨度{
字号：500；
字体大小：24px；
字母间距：0.1米；
颜色：#FFFFFF；
文本阴影：2px2p4pRGBA（1841841841840,0.70）；
背景滤镜：模糊（4px）；
}
#圈1p{
显示：无；
}
#圈2P{
显示：无；
}
#圆圈3P{
显示：无；
}
#第一节{
高度：100vh；
}
#第1节h1{
颜色：黑色；
}

介意
与一个人在应对生活时的思维、感受和行为有关。情绪健康的人能够以健康的方式感受、表达和回应各种情绪，并与他人建立健康的关系
社会的
与你与他人的关系有关。社会健康状况良好的人可以与家人、朋友和更广泛的社区建立联系并做出贡献
精神卫生
精神的
与你如何在生活中找到意义和目标有关。精神健康的人有一种比自己和日常生活更重要的感觉
根据世界卫生组织，心理健康被定义为“一种健康状态，在这种状态下，个人实现了自己的能力，能够应对正常的生活压力，能够富有成效地工作，并且能够
为他或她的社区做出贡献。”

圆圈翻转、物体移动不正确以及要求悬停的圆圈出现在其他圆圈上方都有问题

另一个问题，虽然几乎看不见，但使一个元素的不透明度小于1意味着其中的所有内容的不透明度也小于1——因此在本例中，两个圆圈的标题更模糊。我们将背景色放在before伪元素上，这样就可以设置它的op