preserve-3d не работает на дочернем элементе

Question

Я использую Google Chrome и React.js.

EDIT: Вот jsfiddle с простым CSS: 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 не работает

Все еще не работает. Любая помощь? Заранее спасибо

Answer 1

Для кого это может касаться, я обнаружил, что причина неуважения к оси z на самом деле связана со свойством непрозрачности, и это следует устранить ...