CSS 卡片效果：背面未显示在父背景之上答案

【问题标题】：CSS Card Effect: Back face not showing on top of parent backgroundCSS 卡片效果：背面未显示在父背景之上
【发布时间】：2017-10-23 16:09:15
【问题描述】：

我有一个黑色背景色的元素和 2 个不同背景色的子元素。它们被设置为像卡片一样翻转，翻转时显示背面（第二个子 div）。在适用于 Windows 的 Chrome 和适用于 Windows 和 OSX 的 Firefox 上运行良好，但出于某种奇怪的原因，在适用于 OSX 的 Chrome 上，它在翻转时不显示背面，而是显示父背景颜色：

.flipper{
  transform-style: preserve-3d;
  transition:transform 0.5s ease-out;
  overflow: visible;
  width:200px;
  height:200px;
  position:relative;
  background:black;
}

.flipper.flipped {
  transform:rotate3d(0,1,0,180deg);
}


.face{
   	position: absolute;
   	top:10px;
   	left:10px;
   	right:10px;
   	bottom:10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    backface-visibility: hidden;
    overflow:hidden;

}

.front{
      transform: rotate3d(0,0,0,0deg);
}

.back{
      transform: rotate3d(0,1,0,180deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flipper">

<div class="front face" style="background:red;">
<button onclick='$(".flipper").toggleClass("flipped")'> FLIP TO BACK
</button></div>

<div  class="back face" style="background:blue;">
<button onclick='$(".flipper").toggleClass("flipped")'> FLIP TO FRONT
</button></div>
</div>

您可能只能在 Mac 上的 chrome 上查看此错误。

任何想法如何解决？

【问题讨论】：

标签： html css macos google-chrome

【解决方案1】：

一种方法是将transform: translateZ(0); 用于您要翻转的元素中的内容。

.flipper{
  transform-style: preserve-3d;
  transition:transform 0.5s ease-out;
  overflow: visible;
  width:200px;
  height:200px;
  position:relative;
  background:black;
}

.flipper.flipped {
  transform:rotate3d(0,1,0,180deg);
}


.face{
   	position: absolute;
   	top:10px;
   	left:10px;
   	right:10px;
   	bottom:10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    backface-visibility: hidden;
    overflow:hidden;

}

.front{
      transform: rotate3d(0,0,0,0deg);
}

.back{
      transform: rotate3d(0,1,0,180deg);
}

button {
  transform: translateZ(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flipper">

<div class="front face" style="background:red;">
<button onclick='$(".flipper").toggleClass("flipped")'> FLIP TO BACK
</button></div>

<div  class="back face" style="background:blue;">
<button onclick='$(".flipper").toggleClass("flipped")'> FLIP TO FRONT
</button></div>
</div>

【讨论】：