Question

这是我目前所拥有的jsbin。

我不明白为什么tranformZ不起作用。这是我的HTML：

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

以下是我的CSS，我有透视设置和变换风格设置保存-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

您的.data('bragData', higiBrag.createResponse('twitter', shareMessage + ' ' + profileUrl)) .data('shareable', shareable) .data('shareableType', shareableType) .attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURI(shareMessage + ' ' + profileUrl));设置为零，因此转换元素font-size等于80em。使用其他单位进行变换或增加字体大小。

transformZ无法正常工作

1 个答案: