Question

我正在使用google chrome和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轴的原因实际上与不透明度属性有关，应该将其删除...

reserve-3d不适用于子元素

1 个答案: