Ad esempio, se si posizionano 2 div assoluti, si può mettere il primo div al secondo impostando lo z-index del primo div più alto del secondo. Possiamo ottenere questo comportamento usando translateZ() o translate3d?È possibile utilizzare css3 translateZ() anziché z-index?
La risposta ora, 3 anni dopo, è che è possibile. È necessario utilizzare transform-style: preserve-3d; sul genitore, but it's possible.
.container {
transform-style: preserve-3d;
}
.test1 {
width: 500px;
height: 500px;
background: red;
transform: translate3d(0, 0, 1px);
}
.test2 {
width: 500px;
height: 500px;
background: green;
left: 250px;
top: 250px;
position: absolute;
transform: translate3d(0, 0, 0);
}<div class="container">
<div class="test1">
test
</div>
<div class="test2">
test #2
</div>
</div>Grazie, ha contrassegnato questa risposta come accettata. Vale la pena notare che entrambi gli elementi implicati dovrebbero avere la proprietà 'transform' applicata. – mumu2
Ehi. Puoi dare un'occhiata a [questo] (https://plnkr.co/KT6raJ3rBgq8aO1y8Xlk)? Il pulsante è nascosto nonostante abbia un valore di traduzione z maggiore. Grazie. – user1203349
Hm. Sto ottenendo un grande quadrato rosso in Chrome 58 e Safari 10.1. –
Risposta breve: No. View demo che funziona a partire dal momento del distacco
Longer risposta: Non dovrebbe a, ma a volte, come ad esempio quando un elemento ha una trasformazione quando suo fratello non lo fa, alcuni browser don't handle the situation well, con conseguente z-index essere ignorato.
Generalmente, tuttavia, questo è dovuto al fatto che lo stesso transform viene applicato, non a causa dello translateZ. La soluzione in tal caso è quella di fornire tutti gli elementi rilevanti transform: translate3d(0px, 0px, 0px) o qualcosa di simile che renda il browser più accurato gli elementi
Perché non provare e scoprire? – cimmanon