CSS 转换过渡 backface-visibility 不工作

Question

我正在创建翻转名片的转换 (link)，但 backface-visibility 属性给我带来了问题。从代码笔中可以看出，翻转后没有任何东西消失（即使它已将 "backface" 转向屏幕）。我尝试在卡片中创建一个 child div 来继承它的大小，并尝试从一开始就翻转它，这样当卡片被翻转时， div 就会打开它的正面并覆盖其余部分。但是，backface-visibility 不适用于 child div:

.cardBack{
  padding:20px 50px;
  background-color:white;
  position:absolute;
  width:inherit;
  height:inherit;
  backface-visibility:hidden;
  transform:rotateX(180deg);
  z-index:101;
}

如果我删除 transform:rotateX 或 backface-visibility 属性，.cardBack div 将覆盖其余部分卡片翻转和未翻转时的内容。

如果我将它们都删除，它与我想要的完全相反：.cardBack div 在卡片未翻转时遮盖内容，而在翻转卡片时变得不可见。

如果我这样保留它，.cardBack div 将永远不可见。

Answer 1

这是更新后的代码。
Chrome 在旋转元素时有一个奇怪的错误，所以毕竟需要 backface-visibility，而不是 .card 本身。

$(document).ready(function(){
   $(".card").click(function(){
     $(this).toggleClass("turned");
     $(this).toggleClass("unturned");
   });
});

body{
  background-color:#5AEDBC;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow:hidden;
}

.card:after{
  box-sizing:border-box;
  backface-visibility:hidden;
  display:block;
  content:'';
  width:200px;
  height:400px;
  left:380px;
  position:absolute;
  background: cadetblue;
  transform:rotateZ(-40deg);
  backface-visibility:hidden;
}

.card{
  padding:20px 50px;
  overflow:hidden;
  position:absolute;
  width:350px;
  height:120px;
  display: flex;
  justify-content: center;
  align-items:center;
  flex-direction: row;
  background-color:white;
  font-family:'Raleway', sans-serif;
  border:5px solid rgba(0,100,100, 0.75);
  color:#008A45;
  margin-top:100px;
  transition:all 1s ease;
  transform-origin:0 100%;
  transform-style: preserve-3d;
}

.cardBack {
  width:100%;
  height:100%;
  position:absolute;
  top: 0;
  left: 0;
  background-color:white;
  z-index:101;
}

.card.unturned .cardBack{
  opacity: 0;
  transition: opacity 0.25s ease 0.25s;
}
.card.turned .cardBack{
  opacity: 1;
  transition: opacity 0s ease 0.15s;
}
/* this is needed for chrome */
.card > * {
  backface-visibility: hidden;
}
/* */
.card.turned{
  transition:all 1s cubic-bezier(.17,.67,.59,1.35);
  transform:rotateX(-180deg);
}

.info{
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align:right;
  backface-visibility:hidden;
}

.title{
  font-size:26px;
  font-weight:bold italic;
  color:black;
  padding:5px 0;
  display:block;
}

.desc{
  font-size:18px;
  color:#ccc;
  padding:5px 0;
  display:block;
}

.img{
  border-radius: 50%;
  width: 90px;
  height: 90px;
  margin-left:20px;
  backface-visibility:hidden;
  z-index:100;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
<div class="card unturned">
  <div class="cardBack"></div>
  <div class="info"><span class="title">Interesting person 1</span><span class="desc">Description of the interesting person 1</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
  <div class="cardBack"></div>
  <div class="info"><span class="title">Interesting person 2</span><span class="desc">Description of the interesting person 2</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
  <div class="cardBack"></div>
  <div class="info"><span class="title">Interesting person 3</span><span class="desc">Description of the interesting person 3</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>

查看Codepen.io

CSS 转换过渡 backface-visibility 不工作

CSS transform transition backface-visibility not working

css

transition

transform