Если я применил perspective к <body>, есть ли способ переопределить сортировку по глубине, созданную с помощью transform3d?
У меня есть элемент с position: sticky, а затем элемент div, который имеет некоторые дочерним элементам даны переводы (по направлению к зрителю) по оси Z. Эти элементы всегда появляются перед липким элементом. Есть ли способ заменить Z-преобразование?
Перспектива должна быть применена к телу для получения эффектов параллакса при прокрутке.
(минимальный пример здесь , как ни странно это пример, кажется, работает в Chrome, хотя я знаю, что это не должно, не в соответствии с spe c по крайней мере!)
https://codepen.io/ollyskinner/pen/JjdXVam
Редактировать: В соответствии с предложением Paulie_D, фрагмент того же примера
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>