CODEWITHSUNDEEP
cssreactjspreserve-3d
sir-haver
sir-haver

Reputation: 3592

preserve-3d isn't working on child element

I'm using google chrome and React.js.

EDIT: Here is a jsfiddle with plain css: https://jsfiddle.net/4jkvag25/

I'm having the exact same code of a tutorial but still cannot get it to work and don't know why. My 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;
}

My jsx if very simple:

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

The problem is that translateZ isn't working on the child element called #front. I can do translateX or translateY without a problem, but the Z is not respected.

I tried to implement the advices suggested here: -webkit-transform-style: preserve-3d not working

Still not working. Any help? Thanks in advance

Upvotes: 1

Views: 493

Answers (1)

sir-haver
sir-haver

Reputation: 3592

For whom it may concern, I found out that the reason for not respecting the z axis is actually related to the opacity property and this should be removed...

Upvotes: 1

Related Questions