使用带有正参数的perspective（）函数后元素消失

Question

我正在阅读CSS的第8章：The Definitive Guide，第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

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

由于它是一个块元素，因此该中心位于元素文本部分的右侧，因此它会导致向左移动 - 在某些分辨率下可以将其置于页面左边框的后面。 / p>

当元素宽度较低时，查看它是如何变化的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

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

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