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;

您必须通过应用.content来使transform: translateZ()元素前进

.content{
 transform: translateZ(30px)
}

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