html - H1 标签不再显示在页面主体上

Question

所以我创建了一个名为“.content”的 div，我希望它显示一些文本，但由于某种原因它不会显示...... Maby 我只是很愚蠢，但有人可以帮助我吗。

.content{
    color: black;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    color: #fff;
    margin: 0;
    padding: 0;
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: "Luna";
}

<header>  
  <div class="variation-a">
    <button class="suit_and_tie">About Me</button>
  </div>
</header>

<div class="content">
    <h1>Text</h1>
</div>

Answer 1

这里发生的事情是您在 3D 空间中保留您的子元素，并且 header::background 似乎与您的 .content 元素重叠。

perspective: 1px;
transform-style: preserve-3d;

您必须通过应用 transform: translateZ() 将您的 .content 元素向前移动

.content{
 transform: translateZ(30px)
}

此外，transform 可能总是与 transform-style: 一起使用