CSSカード効果：バック顔が、私は黒の背景色と異なる背景色を持つ2つの要素を持つ要素を持つ親の背景

Question

の上に表示されません。これらは、背面（第2子のdiv）に反転を示す、カードのように反転するように設定されています。

.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{ 
 
    \t position: absolute; 
 
    \t top:10px; 
 
    \t left:10px; 
 
    \t right:10px; 
 
    \t 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>

：だけでなく、WindowsとOSXの両方のWindowsとFirefoxのためのChromeで動作しますが、いくつかの奇妙な理由で、ChromeでOSXのために、それが反転し、裏面が表示されません、代わりにそれは親の背景色を示してい

あなたは、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{ 
 
    \t position: absolute; 
 
    \t top:10px; 
 
    \t left:10px; 
 
    \t right:10px; 
 
    \t 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>