0

If I have perspective applied to <body>, is there any way to override the depth sorting created by transform3d?

I have a element with position: sticky, and then a div which has some child elements given translations (towards the viewer) on the Z axis. These elements always appear in front of the sticky element. Is there any way to supersede the Z transformation?

The perspective needs to be applied to body to produce parallax effects from scrolling.

(minimal example here, strangely this example seems to work in Chrome, altho I know that it shouldn't, not according to spec at least!)

https://codepen.io/ollyskinner/pen/JjdXVam

Edit: As suggested by Paulie_D, snippet of the same example

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow-x:hidden;
  overflow-y:auto;
  perspective: 100px;
  perspective-origin: left;
}

.wrapper {
  position: relative;
  height: 150vh;
  transform-style: preserve-3d;
}

.el {
  padding: 10px;
}
  
.el.sticky {
  position: sticky;
  top: 0;
  width: 100px;
  height: 50px;
  background: grey;
  z-index: 100;
}

.el.preserve3d {
  background-color: aqua;
  transform-style: preserve-3d;
  width: 300px;
}
  
.el.transformed {
  position: relative;
  width: 200px;
  height: 50vh;
  background-color: rgba(120,120,0,0.5);
  border: 1px solid red;
  transform: translate3d(0,0,10px) rotateY(15deg) scale(0.9);
}
<div class="wrapper">
  <div class="el sticky">sticky element</div>
  <div class="el preserve3d">
    <div class="el transformed">content</div>
  </div>
</div>
Ollywood
  • 541
  • 5
  • 10
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website OR off-site example doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Feb 17 '20 at 16:36
  • This seems to be related to z-index bug with transform translate3d: https://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d – Pratyush Feb 17 '20 at 17:10
  • @Pratyush it's not really a bug if all the browsers generally behave the same way... – Ollywood Feb 17 '20 at 21:41
  • @G-Cyr FF wasn't applying the transform as the containing div didn't have transform-style: preserve-3d set on it, now fixed in the snippet. In any case, as per the question, I need the perspective applied to the body. – Ollywood Feb 17 '20 at 21:44
  • okay, your pen works fine in both chrome and FF , You use translatez(10px) to overcome the side effect of rotateY(5deg) within the perspective. You probably need a negative z translation for the parent to stand below the other element. here is the idea : https://codepen.io/gc-nomade/pen/xxGOpWW (to avoid also bugs from the sticky behavior) – G-Cyrillus Feb 18 '20 at 17:06

0 Answers0