元素在应用具有正参数的 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

试试这个

div#inner {
            transform: rotate(30deg) translate(20px) perspective(30px);
   width: 100px;
        }

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

Answer 2

透视原点默认在元素中心。

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

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

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>

Element disappears after being applied perspective() function with positive argument