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;

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

嵌套的背面可见性未隐藏

1 个答案: