CSS卡片Hover旋转效果在Safari中失效问题排查

核心原因 #

1. 类名冲突：自定义的.card类与Bootstrap内置的.card类样式冲突，Bootstrap的.card自带的默认样式（如边框、阴影等）干扰了3D变换的渲染逻辑。
2. Safari兼容性限制：Safari对CSS 3D变换的处理更严格，未添加webkit前缀的3D属性可能无法正常生效，同时需要确保父元素的transform-style: preserve-3d属性正确作用，否则backface-visibility会失效。

修复步骤 #

1. 重命名自定义卡片类，隔离冲突

将HTML和CSS中的.card替换为自定义类名（比如.custom-card），彻底避免与Bootstrap样式的冲突。

2. 添加Safari兼容前缀

给backface-visibility、transform-style、transform等3D相关属性加上-webkit-前缀，确保在Safari中正常渲染。

3. 清理冗余CSS选择器

移除代码中重复的选择器（如重复的.card-wrapper .card .back），避免样式优先级混乱。

修复后的完整代码 #

CSS

body {
  background-color: grey;
}

.card-wrapper {
  display: inline-block;
}

.card-wrapper .custom-card {
  position: relative;
  cursor: pointer;
  transition-duration: 0.6s;
  transition-timing-function: ease-in-out;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d; /* Safari兼容 */
}

.card-wrapper .custom-card .front,
.card-wrapper .custom-card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden; /* Safari兼容 */
  transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg); /* Safari兼容 */
  text-align: center;
}

.card-wrapper .custom-card .front {
  z-index: 2;
  padding: 0 5px;
}

.card-wrapper .custom-card .back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg); /* Safari兼容 */
}

.card-wrapper:hover .custom-card {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg); /* Safari兼容 */
}

.card-wrapper,
.custom-card {
  width: 275px;
  height: 350px;
  margin: 10px;
}

.custom-card .front,
.custom-card .back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.custom-card .front {
  background: #FFFFFF;
  font-size: 18px;
}

.custom-card .back {
  font-size: 1.5rem;
  color: #FFFFFF;
  background: blue;
}

HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<li class="card-wrapper">
  <div class="custom-card">
    <div class="front">
      <br>
      <p>This is the front of the card</p>
    </div>
    <div class="back">This is the back of the card</div>
  </div>
</li>
<li class="card-wrapper">
  <div class="custom-card">
    <div class="front">
      <br>
      <p>This is the front of the card</p>
    </div>
    <div class="back">This is the back of the card</div>
  </div>
</li>

额外说明 #

• 类名冲突是引入Bootstrap后功能失效的主要原因，重命名自定义类是最彻底的解决方式，能避免后续Bootstrap版本更新带来的潜在问题。
• 添加webkit前缀可覆盖更多旧版本Safari的兼容场景，确保3D变换效果稳定。

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