Próbowałem ukryć element podrzędny „list” za elementem nadrzędnym „div2” za pomocą translateZ. Działa fantastycznie w Chrome, ale nie w Firefoxie. Proszę o jakieś ciało.
Link do JSFiddle. translateZ na firefox
.list {
width: 200px;
height: 10px;
background-color: yellow;
-moz-transform: translateZ(-1em);
-webkit-transform: translateZ(-1em);
}
Znajdź zdjęcie tutaj Link do obrazu
Obraz po lewej stronie, który działa poprawnie na chromie. Żółty pasek jest za czerwonym div. Obraz po prawej stronie pochodzi z firefoxa, w którym żółty pasek znajduje się przed czerwonym div - czego się nie spodziewano.
Odpowiedzi:
1 dla odpowiedzi № 1The transform-style: preserve-3d; nie jest dziedziczone, musi być ustawiony na każdego potomka w hierarchii, aby utrzymać go w tej samej przestrzeni 3D.
Zachowałeś dziedziczenie 3D w #div1 i #div2, ale nie w
.sub wnuczka, więc rodowód został złamany .list dziadek, który chcesz przenieść.
Jeśli dodasz go do swojego .sub CSS zaakceptuje swoje dziecko .list w przestrzeń 3D i zastosuj transformację Z.
.sub {
height: 20px;
width: 50px;
background-color: black;
transform-style: preserve-3d;
}