css - 元素在应用具有正参数的 perspective() 函数后消失

Question

我正在阅读 CSS 的第 8 章:权威指南，第 4 版。书中有这样一段话:

div#inner {
  transform: perspective(750px) translateZ(60px) rotateX(45deg);
}

<div id="outer">
  outer
  <div id="inner">inner</div>
</div>

带#inner 的div 从我的chrome 浏览器中消失了。调整透视函数的参数值并将其设置为 0 后，我可以在页面上看到 inner 文本，并带有一些旋转效果。

你知道为什么吗？我在 safari 中试过这个页面，问题仍然存在。

Answer 1

默认情况下，透视原点位于元素的中心。

因为它是一个 block 元素，这个中心位于元素文本部分的右侧，因此它导致向左移动 - 在某些分辨率下可以将它带到页面的左边框后面。

看看当元素宽度变小时它是如何变化的:

div#inner {
  background-color: lightblue;
  transform: perspective(750px) translateZ(60px) rotateX(45deg);
}

<div id="outer">
  outer
  <div id="inner">inner</div>
</div>

div#inner {
  width: 70px;
  background-color: lightgreen;
  transform: perspective(750px) translateZ(60px) rotateX(45deg);
}

<div id="outer">
  outer
  <div id="inner">inner</div>
</div>