嵌套的背面可见性未隐藏

Question

我遇到了“嵌套”backface-visibility的问题。

我想要翻转div，双方都有内容。为此，我使用两个div翻转，每个div表示我的“双面”div（.face和.back）的面。
轮换效果很好。

现在，我想隐藏他们的容器，并在页面加载另一个翻转时显示它。但正如您所看到的，我的.face div是可见的。

如何在动画之前避免.face显示？

以下是我可以缩短的工作示例（Chrome青睐）：

.flip {
  position: relative;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  animation: init 1s ease 2s 1 normal forwards;
}
.flip div {
  backface-visibility: hidden;
  transition: 1s;
  margin: 0;
  padding: 20px;
  border: 1px solid;
  width: 200px;
  text-align: center;
}
.back {
  position: absolute;
  top: 0;
  left: 0;
}
.face,
.flip:hover .back {
  transform: rotateX(0deg);
}
.flip:hover .face,
.back {
  transform: rotateX(180deg);
}

@keyframes init {
  from { transform: rotateX(180deg); }
  to   { transform: rotateX(0deg); }
}

<div class="flip">
  <div class="face">FACE</div>
  <div class="back">BACK</div>
</div>

Answer 1

如果您希望它以嵌套方式工作，则需要属性

  transform-style: preserve-3d;

在他的父母：

＆＃13;

＆＃13;

.flip {
  position: relative;
  backface-visibility: hidden;
  transform: rotateX(180deg);
  transform-style: preserve-3d;
  animation: init 1s ease 2s 1 normal forwards;
}
.flip div {
  backface-visibility: hidden;
  transition: 1s;
  margin: 0;
  padding: 20px;
  border: 1px solid;
  width: 200px;
  text-align: center;
}
.back {
  position: absolute;
  top: 0;
  left: 0;
}
.face,
.flip:hover .back {
  transform: rotateX(0deg);
}
.flip:hover .face,
.back {
  transform: rotateX(180deg);
}

@keyframes init {
  from { transform: rotateX(180deg); }
  to   { transform: rotateX(0deg); }
}

＆＃13;

<div class="flip">
  <div class="face">FACE</div>
  <div class="back">BACK</div>
</div>

＆＃13;

＆＃13;

＆＃13;