css z-Indeks utracony po transformacji webkit translate3d
Mam dwa absolutnie umieszczone elementy div, które nakładają się na siebie. Oba mają ustawione wartości z-index za pomocą css. Używam transformacji translate3d webkit do animowania tych elementów poza ekranem, a następnie z powrotem na ekran. Po przekształceniu elementy nie respektują już swoich wartości zbioru z-index.
Czy ktoś może wyjaśnić, co dzieje się z kolejnością z-index / stack elementów div, gdy wykonam na nich transformację webkit? I wyjaśnij, co mogę zrobić, aby utrzymać stos-kolejność div żywioły?
Oto więcej informacji o tym, jak robię transformację.
Przed transformacją, każdy element dostaje te dwie wartości przejścia webkit ustawione przez css (używam jQuery do wykonywania .css() wywołania funkcji:
element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });
Element jest następnie animowany przy użyciu translate3d-webkit-transform:
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
Btw, próbowałem ustawić trzeci parametr translate3d na kilka różnych wartości, aby spróbować odtworzyć kolejność stosu w przestrzeni 3d, ale nie szczęście.
Ponadto, przeglądarki iPhone/iPad i Android są moją przeglądarką docelową, na której ten kod musi działać. Oba obsługują przejścia webkit.
7 answers
To może być związane z: https://bugs.webkit.org/show_bug.cgi?id=61824
Zasadniczo, gdy zastosujesz transformatę 3D na osi Z, Indeks z nie może być już uwzględniany(jesteś teraz w trójwymiarowej płaszczyźnie renderowania, używaj różnych wartości z). Jeśli chcesz wrócić do renderowania 2D dla elementów potomnych, użyj transform-style: flat;.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-06-09 16:33:18
Jest to zdecydowanie związane z błędem zauważonym przez samy-delux. Powinno to dotyczyć tylko elementów, które są pozycjonowane jako absolutne lub względne. Aby rozwiązać ten problem, możesz zastosować następującą instrukcję css do każdego elementu, który jest umieszczony w ten sposób i powoduje problemy:
-webkit-transform: translate3d(0,0,0);
To zastosuje transformację do elementu bez wykonywania transformacji, ale wpływa na jego kolejność renderowania, więc znajduje się powyżej elementu powodującego problem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-18 12:55:17
Trochę za późno na to, ale spróbuj umieścić na elementy, które straciły swój Z-index umieszczając poniżej, miałem problem podczas robienia paralaksy Ostatnio i to bardzo pomogło.
transform-style: preserve-3d;
To oszczędza Wkładanie
transform: translate3d(0,0,0);
Na innych elementach, które bardziej obciążają GPU
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-25 08:52:03
czekam na przykład
Próbowałeś zrobić skalę transformacji(1)? Pamiętam, że miałem podobny problem i musiałem zmienić kolejność elementów html i użyć transformacji, której nie potrzebowałem tylko dlatego, że zmienił się Indeks z użycia transform.
Jeśli nie jestem w błędzie, za każdym razem, gdy używasz transformacji, staje się ona najwyższym dostępnym indeksem z i jest uporządkowana przez najbliższy element html jest na początku znacznika. Więc od do poniżej.
Mam nadzieję, że ta pomoc
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-29 13:38:28
z-index będzie działać przeciwko transformowanym div 3D, Jeśli stylizujesz element stosowy za pomocą -webkit-transform: translateZ(0px);
Fragment na codepen - > http://codepen.io/mrmoje/pen/yLIul
W przykładzie przyciski stack up i stack down podnoszą i opuszczają Indeks z stopki (+/-1) względem obracanego elementu (w tym przypadku img).
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-12 02:13:42
Nie udało mi się odtworzyć problemu, który tu opisujesz. Niezależnie od tego, co robię, wartość z-index jest zachowana we wszystkich transformacjach. Testuję za pomocą Chromium (Google Chrome).
Trzeci argument funkcji translate3d manipuluje osią Z elementu. Koncepcja jest podobna, ale nie dokładnie taka sama jak, z-index... Elementy o niższej osi z znajdują się pod elementami o wyższej wartości.
Wiem, że próbowałeś wartości trzeciego argumentu do dopasuj zamierzony Indeks z, ale problem polega na tym, że oś z nie zmienia się podczas animacji CSS3. W poniższym przykładzie Element zawieszony powinien znajdować się na górze, ale #element_a pozostaje na górze.
Jeśli dodam Indeks z zarówno do zwykłego selektora, jak i :hover selektor, wydaje się działać i pozwolić, aby element zawinięty był najwyżej.
Chociaż nie jest to dokładnie to, czego szukałeś, to zachowanie zapewnia rozwiązanie. Wystarczy użyć translate3d i z-index do Ustaw kolejność początkowego renderowania.
<style>
div {
width: 300px;
height: 150px;
background-color: white;
border: 5px outset gray;
float: left;
margin: 20px;
-webkit-transition: 2s;
}
#element_a {
-webkit-transform: translate3d(0, 0, 50px);
}
#element_b {
-webkit-transform: translate3d(0, 0, 100px);
}
#element_a:hover {
-webkit-transform: translate3d(100px, 0, 60px);
}
#element_b:hover {
-webkit-transform: translate3d(-100px, 0, -60px);
}
</style>
<body>
<div id="element_a">
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
</div>
<div id="element_b">
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
</div>
</body>
Innym sposobem jest to, że możesz utworzyć element nadrzędny i zastosować wszystkie inne przejścia z nim związane:
# Apply transitions to a parent div
<div>
# This image z-index -1
<img src="foo"/>
# This image z-index -3
<img src="bar"/>
#This image z-index -2
<img src="gg"/>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-22 20:14:53