嵌套的背面可见性不隐藏答案

【问题标题】：Nested backface-visibility is not hidden嵌套的背面可见性不隐藏
【发布时间】：2015-06-17 02:19:49
【问题描述】：

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

我想要一个翻转的 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>

【问题讨论】：

标签： css css-transforms

【解决方案1】：

如果你想让它以嵌套的方式工作，你需要这个属性

  transform-style: preserve-3d;

在他的父母中：

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

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

【讨论】：

谢谢，但我想要实现的是容器背面有一个空白。什么都不可见，然后容器翻转和子项可见，然后您可以翻转子项。