css - preserve-3d 不适用于子元素

Question

我正在使用谷歌浏览器和 React.js。

编辑:这是一个带有纯 css 的 jsfiddle: https://jsfiddle.net/4jkvag25/

我有与教程完全相同的代码，但仍然无法正常工作，也不知道为什么。我的 SCSS:

html, body, #root {
  width: 100%;
  height: 100%;
}

#viewport{
    width: 100%;
    height:100%;
    @include perspective(500px);
    background:#eee;
}

#cube{
    width: 400px;
    height: 400px;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-200px;
    margin-top: -200px;
    background:#777;
    opacity:.6;
    @include transformStyle();
}

#cube > div{
    background:blue;
    border:1px solid red;
    width: 100%;
    height: 100%;
    @include boxSizing;
    position: absolute;
    opacity:.7;
}

#front{
    @include transform( translateZ(200px)) // THIS PART ISN'T WORKING;
}

@mixin perspective($val){
    -webkit-perspective: $val;
    perspective: $val;
}

@mixin transformStyle(){
    overflow: visible !important;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

@mixin transform($val){
    -webkit-transform:$val;
    -moz-transform:$val;
    -ms-transform:$val;
    transform:$val;
}

@mixin boxSizing{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

我的 jsx 如果非常简单:

  <div id="viewport">
    <div id="cube">
      <div id="front"></div>
    </div>
  </div>

问题是 translateZ 没有处理名为 #front 的子元素。我可以毫无问题地执行 translateX 或 translateY，但 Z 不受尊重。

我尝试实现此处建议的建议:-webkit-transform-style: preserve-3d not working

还是不行。有什么帮助吗？提前致谢

Answer 1

对于谁来说，我发现不尊重 z 轴的原因实际上与 opacity 属性有关，应该将其删除...