CSS卡效果：背面没有显示在父背景上

Question

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

www.example.com/test.php?var1=test&var2=test

.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);
}

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

任何想法如何解决？

Answer 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>