CSS实现的flip-card翻转卡片悬停翻转后背面图片显示不全

问题场景 #

编程新手在校练习项目，实现正面为芬兰国旗、背面为自定义图片的翻转卡片，触发悬停翻转时背面图片仅显示一半，剩余部分消失。

问题根因 #

• HTML语法错误：背面卡片容器的属性书写错误，未正确声明class，导致flip-card-back的样式完全不生效
• 样式冲突：
  • 全局img设置了top: 900px、left: 525px的偏移属性，作用到了卡片内部的背面图片上，导致图片偏移出卡片可视区域
  • 背面图片容器.image额外加了top: -900px、left: 525px的偏移和z-index: -1的层级设置，进一步导致图片位置异常且被下层元素遮挡
  • 未给背面卡片添加预旋转属性，翻转后内容默认是反向显示的

修复步骤 #

1. 修正HTML语法错误 #

将原代码中错误的背面容器标签：

<div="flip-card-back">

修改为正确的带class属性的标签：

<div class="flip-card-back">

2. 新增背面卡片基础样式 #

给翻转卡片背面添加预旋转属性，保证翻转后内容正向显示：

.flip-card-back {
  transform: rotateY(180deg);
}

3. 清理背面图片容器的无效样式 #

删除.image类中多余的偏移、层级属性，调整为适配卡片尺寸的样式：

.image {
  transform: scale(-1, 1);
  width: 100%;
  height: 100%;
}

4. 覆盖卡片内部图片的全局偏移 #

单独给卡片背面的图片设置样式，覆盖全局img的偏移属性，保证图片填满整个卡片背面：

.flip-card-back img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
}

额外优化建议 #

不要使用全局img选择器设置偏移样式，会影响页面所有图片的布局，建议给需要单独设置位置的图片（比如芬兰伏特加的那张图）添加专属类名，再写对应样式，避免样式污染。

内容的提问来源于stack exchange，提问作者Alexander Marini