transform：rotateY（）使元素消失

Question

我试图在div上应用一个简单的transform: rotateY(90deg)但是它（div）因此消失了，dev工具不会在该行上抛出任何错误，任何建议或我可能遗漏的任何东西？< / p>

Answer 1

这种情况发生的原因是当您将Y轴上的某些东西旋转90度时，它会旋转，使其基本上面向不同的方向。在下面的示例中，我添加了一个转换，以显示元素随时间的变化情况（将鼠标悬停在其上）：

＆＃13;

＆＃13;

figure {
  background: red;
  height: 100px;
  transition: 1s;
  width: 100px;
}

div:hover figure {
  transform: rotateY(90deg);
}

＆＃13;

<div>
  <figure></figure>
</div>

＆＃13;

＆＃13;

＆＃13;

由于我们的视口直接看到元素并且没有深度，因此看起来该元素已完全消失。

如果我们确实增加了一些深度，那么更容易想象出现的情况：

左侧的立方体是我们的预变换立方体，右侧的立方体是我们的立方体，在它应用了rotateY(90deg)之后。由于我们根本没有深度，我们正在查看我们的元素正面，当它旋转90度时我们看不到任何东西。