0

I'm using parallax.js for a project. I put some layers for mouse driven movement. Now, on a specific layer I'm trying to make some rotationY and X.

From the moment I set the rotation the stacking order of the absolute elements breaks (as you can see in the image).

After googling for hours and after searching here I saw that many users suggest to put transform: translate3d(0px, 0px, 0px); transform-style: preserve-3d; backface-visibility: hidden; on parent or on each element and by experimenting. Am I missing something?

I know that the preserve-3d do the job (respect the z order) but no in my case. I reproduced the issue in that codepen. (move your mouse there) As you can see the elements are bad rendered as in the image and overlapping each other. How can I force the browser to respect the Z order?

It works if I set on #scene transform-style: flat, but it messes the 3d sense.

Also the parallax.js auto inserts inline style for preserving 3d and backface visibillity on each elements as you can see on the source (2nd image)

z-index while rotating

source

David Ansermot
  • 6,052
  • 8
  • 47
  • 82
  • 2
    Possible duplicate of [css z-index lost after webkit transform translate3d](http://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d) – itamar May 17 '16 at 13:09
  • There is nothing wrong here, when you rotate it, it is natural that a part becomes in front or else no point spinning it in the first place. Try use `transform: rotateY(-10deg);` and you'll see it works/spins the other way around. – Asons May 17 '16 at 13:09
  • @LGSon Are you in chrome? –  May 17 '16 at 13:17
  • Am on Chrome, but was just now testing in FF and Edge ... in FF it is in front, Chrome/Edge not ... so question is: which is correct? – Asons May 17 '16 at 13:23
  • Expected behaviour is to respect the z-index. So model-1 is in the back, model-2 is in front of model-1, model-rotatable is in front of model-2, and model-3 is on top. If you set `transform-style: flat !important` on the scene you're gonna see the expected result. (FF doesn't respect anything) –  May 17 '16 at 13:32

0 Answers0