css - transformZ 不工作

Question

这是一个jsbin到目前为止我所拥有的。

我不明白为什么 tranformZ 不起作用。这是我的 html:

<div class="pyramid-container">
  <div id="pyramid">
    <div>child div of #pyramid</div>
  </div>  
</div>

下面是我的 CSS，我将透视设置和变换样式设置为 preserve-3d，所以我不知道哪里出了问题。

.pyramid-container {
  perspective: 800px;
}

#pyramid {
  position: relative;
  height: 200px;
  width: 100px;
  transform-style: preserve-3d;
  transform-origin: 116px 200px 116px;
}

#pyramid div {
  position: absolute;
    width: 0;
    height: 0;
    border-left: 200px solid transparent;  /* left arrow slant */
    border-right: 200px solid transparent; /* right arrow slant */
    border-bottom: 200px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
  opacity: .5;
}

#pyramid div:nth-child(1) {
  transform: translateZ(80em);
}

Answer 1

您的 font-size 设置为零，因此转换元素 80em 等于 0px。使用另一个单位进行转换或增加字体大小。