Html 使用CSS3翻牌问题

我对翻转卡片有一个问题，旋转会导致在调整浏览器大小时出现空白（有时）

请记住，我必须继续为父div使用百分比，我的意思是在下面的提琴中显示相同的网格样式

我已经翻转了所有框来查看翻转后的问题，因此您可以调整窗口大小并查看导致的GAB

正面
返回

---

请看一看

根据您最后的评论，我认为问题在于这门课：

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

将

宽度：100%

更改为

宽度：100px

（或200px一些数字）。

---

使用%容器时，根据其父容器（和浏览器窗口）调整大小。

这是执行三维变换时的常见问题。 一种解决方法是使用

1px

边框和您的卡的颜色（如果可能的话）

例如，使用您提供的代码，这将是一个解决方案

正文{
背景：#000；
填充：0；
保证金：0；
}
.os_集{
宽度：100%；
身高：100%；
保证金：0自动；
位置：绝对位置；
显示：网格；
网格模板柱：20%20%20%20%20%；
网格自动行：50%50%50%50%50%；
网格间距：0；
调整项目：拉伸；
对齐项目：拉伸；
}
.os_盒{
线高：203px；
文本对齐：居中；
位置：相对位置；
透视图：800px；
-webkit透视图：800px；
游标：默认值；
z指数：99；
}
#卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
变换样式：保留-3d；
转变：转变1s；
}
#卡片数字{
保证金：0；
显示：块；
位置：绝对位置；
宽度：100%；
身高：100%；
背面可见性：隐藏；
}
#名片，正面{
背景：#fff；
}
#卡，回来{
背景：#ccc；
变换：旋转（180度）；
边框：1px实心#ccc；/*添加此*/
}
#卡片翻了{
变换：旋转（180度）；
}

正面
返回
正面
返回
正面
返回
正面
返回
正面
返回
正面
返回
正面
返回
正面
返回
正面
返回
正面
返回

进行翻转的代码在哪里？房间里什么也没有jsfiddle@TemaniAfif它仍然没有翻转它和你在答案中的答案一样，没有翻转，只有静态HTML/CSSI已经翻转了它，以查看翻转后的效果。类。翻转已添加到所有框中。

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}