翻页卡片CSS/HTML：翻页时卡片背面不显示

目标：我希望在容器或网格（如果响应更好）中有响应卡，即翻转。翻转卡片时，卡片正面会显示此人的详细信息

已尝试：我正在使用翻转卡信息，但背面未显示。

代码：到目前为止我拥有的。

/*翻转卡容器-根据需要设置宽度和高度。我们添加了border属性，以演示翻转本身在悬停（如果您不想要3D效果，请删除透视）时会跳出框*/
.翻盖卡片{
背景色：透明；
宽度：20em；
高度：29em；
边框：1px实心#f1f1；
透视图：1000px；
/*如果不想要3D效果，请删除此选项*/
}
/*需要使用该容器来定位正面和背面*/
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.8s；
变换样式：保留-3d；
}
/*在翻转框容器上移动鼠标时进行水平翻转*/
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}
/*定位前后侧*/
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；
/*狩猎*/
背面可见性：隐藏；
}
.翻转卡正面{
背景色：#bbb；
颜色：黑色；
}
/*背面样式*/
.把卡片翻回去{
背景色：淡蓝色；
颜色：白色；
变换：旋转（180度）；
}

关于我们
static/images/Dad3x4.png“alt=”dad owner“>
凯尔场
所有者

关于我


同一天，我们将为精英们献身，为我们的事业奉献力量
康茂迪
水平
艾乌斯·维尼安·马克西姆？

static/images/KyleField3x4.png“alt=“kyle brother”>
关于我
兄弟
关于我
Lorem ipsum door sit amet，继续向精英致敬
odio suscipit non
康茂迪
水平
艾乌斯·维尼安·马克西姆
static/images/AlixField3x4.png“alt=”alix-sister`>
阿利克斯场
姐妹
关于我


同一天，我们将为精英们献身，为我们的事业奉献力量
康茂迪
水平
艾乌斯·维尼安·马克西姆？

static/images/RamseyBond3x4.png“alt=”ramsey besty“>
拉姆齐债券
Besty
关于我

同一天，我们将为精英们献身，为我们的事业奉献力量
康茂迪
水平
艾乌斯·维尼安·马克西姆？

嵌套div标记的顺序对于css规则很重要：

/*翻转卡容器-将宽度和高度设置为您想要的任何值。我们添加了border属性，以演示翻转本身在悬停时会跳出框外（如果您不想要3D效果，请删除透视图）*/
.翻盖卡片{
背景色：透明；
宽度：300px；
高度：200px；
边框：1px实心#f1f1；
透视图：1000px；/*如果不想要3D效果，请删除此选项*/
}
/*需要使用该容器来定位正面和背面*/
.翻转卡内部{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
转变：转变0.8s；
变换样式：保留-3d；
}
/*在翻转框容器上移动鼠标时进行水平翻转*/
.翻转卡：悬停。翻转卡内部{
变换：旋转（180度）；
}
/*定位前后侧*/
.正面翻转卡片，.背面翻转卡片{
位置：绝对位置；
宽度：100%；
身高：100%；
-webkit背面可见性：隐藏；/*Safari*/
背面可见性：隐藏；
}
/*设置正面样式（如果缺少图像，则后退）*/
.翻转卡正面{
背景色：#bbb；
颜色：黑色；
}
/*背面样式*/
.把卡片翻回去{
背景色：淡蓝色；
颜色：白色；
变换：旋转（180度）；
}

static/images/Dad3x4.png“alt=”dad owner“>
凯尔场
所有者


同一天，我们将为精英们献身，为我们的事业奉献力量
康茂迪
水平
艾乌斯·维尼安·马克西姆？

static/images/Dad3x4.png“alt=”dad owner“>
凯尔场
所有者


同一天，我们将为精英们献身，为我们的事业奉献力量
康茂迪
水平
韦尼亚姆格言