Html css闪存卡（无Javascript）

为什么卡片会翻过顶部边缘？ 为什么边境不一直绕着卡走？ 为什么我将卡片翻转到背面时仍能看到图像

我在这里贴了一个代码笔的链接

这里有一个链接，指向我计划用于所有闪存卡的大小图像

label.rob-label{
-webkit透视图：1000px；
透视图：1000px；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
显示：块；
宽度：75%；
高度：150像素；
位置：静态；
左：50%；
最高：50%；
光标：指针；
左边距：自动；
右边距：自动；
}
img{
宽度：90%；
}
.罗布卡{
位置：相对位置；
身高：100%；
宽度：100%；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
-webkit转换：所有600毫秒；
过渡：所有600毫秒；
z指数：20；
边框样式：实心；
边界宽度：薄；
}
.罗布卡分区{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：#FFF；
文本对齐：居中；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
边界半径：2px；
}
.rob card div>表格{
背景：#fff；
宽度：100%；
身高：100%；
}
.rob card.回来{
颜色：#222；
-webkit变换：rotateX（180度）；
变换：rotateX（180度）；
}
标签。抢劫标签：悬停。抢劫卡{
-webkit变换：rotateX（20度）；
变换：rotateX（20度）；
盒影：0 20px 20px rgba（50,50,50,2）；
}
输入{
显示：无；
}
：勾选+抢劫卡{
变换：rotateX（180度）；
-webkit变换：rotateX（180度）；
}
标签。rob标签：悬停：选中+。rob卡{
变换：rotateX（160度）；
-webkit变换：rotateX（160度）；
框阴影：0 20px 20px rgba（255、255、255、.2）；
}

1.
窦性心动过缓-心律失常-发生率缓慢
节奏不规则

您正在哪个浏览器中测试？我做了一些改变，当我在Chrome中演示时，一切看起来都很好

正文{
填充顶部：50px；
}
label.rob-label{
-webkit透视图：1000px；
透视图：1000px；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
显示：块；
宽度：75%；
高度：150像素；
位置：静态；
左：50%；
最高：50%；
光标：指针；
左边距：自动；
右边距：自动；
}
img{
宽度：100%；
高度：自动；
}
.罗布卡{
位置：相对位置；
高度：223px；
宽度：861px；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
-webkit转换：所有600毫秒；
过渡：所有600毫秒；
z指数：20；
边框样式：实心；
边界宽度：薄；
}
.罗布卡分区{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：#FFF；
文本对齐：居中；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
边界半径：2px；
}
.rob card.回来{
颜色：#222；
-webkit变换：rotateX（180度）；
变换：rotateX（180度）；
背景：#fff；
}
标签。抢劫标签：悬停。抢劫卡{
-webkit变换：rotateX（20度）；
变换：rotateX（20度）；
盒影：0 20px 20px rgba（50,50,50,2）；
}
输入{
显示：无；
}
：勾选+抢劫卡{
变换：rotateX（180度）；
-webkit变换：rotateX（180度）；
}
标签。rob标签：悬停：选中+。rob卡{
变换：rotateX（160度）；
-webkit变换：rotateX（160度）；
盒影：0 20px 20px rgba（255255255.2）；
}

窦性缓慢性心律失常-心率缓慢，心律不规则

codepen链接只是另一个imgur链接，我在Firefox中运行了原始代码。我也在Firefox中运行了您编辑的代码，它运行正常！谢谢@jdewitt除了我尝试使用不同大小的图像外，其他更改都有效。以下是我得到的：