转换时的背景问题：rotateY()，问题似乎只发生在 codepen(?)

问题描述

我正在尝试在 codepen 中创建一个 3D 翻转卡片，每当我悬停卡片时，它的内容都应该沿 Y 轴旋转。如果我在codepen中尝试这样做，卡片正面的背景基本上变成透明的，这样卡片背面的背景就会出现，反之亦然。

我已经尝试了相同的代码，在我的浏览器（Chrome 和 Firefox）中运行它并且运行良好。

我也已经尝试过使用变换样式：preserve-3d;以及背面可见性：隐藏； . 还是不行。

这是否只是 CodePen 中的一个错误，因为它可以在我的普通浏览器中工作，或者是什么原因。

这是我的代码：

:root {
  Box-sizing: border-Box;
  font-family: sans-serif;
}
*,*::before,*::after {
 Box-sizing: inherit;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.card {
 width: 300px;
 height: 400px;
 transform-style: preserve-3d;
}
.card__content {
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 3s ease;
  position: relative;
 }

.card:hover .card__content {
  transform: rotateY(180deg);
}

.card__front,.card__back {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 5em;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  border: 1px solid black;
 }

.card__front {
 background: red;
}

 .card__heading {
 transform: translateZ(2rem);
}
.card__desc {
 transform: translateZ(3rem);
}

.card__back {
 transform: rotateY(180deg);
 background: blue;
}
.card__body {
 max-width: 60%;
 transform: translateZ(4rem);
}

<div class="card">
 <div class="card__content">
   <div class="card__front">
     <p class="card__desc">
       This would be some text
     </p>
     <h1 class="card__heading">
       Your heading
     </h1>
   </div>
   <div class="card__back">
     <p class="card__body">
       Lorem ipsum dolor sit amet consectetur adipisicing elit.
     </p>
   </div>
 </div>
</div>

这是代码笔的链接：https://codepen.io/xutocode/pen/KKaNQqY?editors=1100 在那里你可以看到，卡片正面的红色背景在悬停时是如何变成蓝色的，甚至在旋转之前。再说一遍：这是 CodePen 中的常见错误吗？

解决方法

safari 似乎导致 backface-visibility 出现问题。如果没有 webkit 前缀，它似乎不受支持。尝试以下操作似乎对我来说适用于 safari。

.card__front,.card__back {
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 5em;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  border: 1px solid black;
}

codepen html