css - multiple - transition transform

css z-index perdido después de la transformación de webkit translate3d

Question

Tengo dos elementos div completamente posicionados que se superponen. Ambos han establecido valores de z-index a través de css. Utilizo la transformación del webkit translate3d para animar estos elementos fuera de la pantalla y luego volver a la pantalla. Después de la transformación, los elementos ya no respetan sus valores de z-index .

¿Alguien puede explicar qué sucede con el z-index / stack-order de los elementos div una vez que hago una transformación de webkit en ellos? ¿Y explicar qué puedo hacer para mantener el orden de apilamiento de los elementos div?

Aquí hay más información sobre cómo estoy transformando.

Antes de la transformación, cada elemento obtiene estos dos valores de transición de webkit establecidos a través de css (estoy usando jQuery para hacer las llamadas a la función .css() :

element.css({ ''-webkit-transition-duration'': duration + ''s'' });
element.css({ ''-webkit-transition-property'': ''-webkit-transform'' });

El elemento se anima luego usando translate3d -webkit-transform:

element.css({ ''-webkit-transform'': ''translate3d('' + hwDelta + ''px, 0, -1px)'' });

Por cierto, he intentado establecer el 3er parámetro de translate3d en varios valores diferentes para tratar de replicar el orden de la pila en el espacio 3D, pero no tuve suerte.

Además, los navegadores iPhone / iPad y Android son mi navegador de destino en el que este código debe ejecutarse. Ambos admiten transiciones de webkit.

Answer 1

Esto definitivamente está relacionado con el error observado por samy-delux. Esto solo debería afectar a cualquier elemento que esté posicionado como absoluto o relativo. Para solucionar el problema, puede aplicar la siguiente declaración css a cada elemento que esté posicionado de esta manera y esté causando problemas:

-webkit-transform: translate3d(0,0,0);

Esto aplicará la transformación al elemento sin realizar realmente una transformación, pero afectando su orden de reproducción, por lo que está por encima del elemento que causa el problema.

Answer 2

Esto podría estar relacionado con: https://bugs.webkit.org/show_bug.cgi?id=61824

Básicamente, cuando aplica una transformación 3D en el eje z, ya no se puede tener en cuenta el índice z (ahora se encuentra en un plano de representación tridimensional, use diferentes valores z). Si desea volver a la representación 2D para elementos secundarios, use transform-style: flat; .

Answer 3

No he podido reproducir el problema que describes aquí. Independientemente de lo que haga, el valor del índice Z se conserva en todas las transformaciones. Estoy probando usando Chromium (Google Chrome).

El tercer argumento de la función translate3d manipula el eje z del elemento. El concepto es similar a, pero no exactamente lo mismo que, el índice z ... Los elementos con un eje z más bajo están debajo de los elementos con un valor más alto.

Sé que probó los valores del tercer argumento para que coincida con su índice Z previsto, pero el problema es que el eje z no parece cambiar durante la animación CSS3. En el siguiente ejemplo, el elemento fijo debe estar en la parte superior, pero #element_a permanece en la parte superior.

Si agrego un índice Z tanto al selector regular como al selector de desplazamiento, parece que funciona y permite que el elemento fijo sea el más alto.

Aunque no es exactamente lo que estabas buscando, este comportamiento proporciona una solución. Solo necesita usar translate3d y z-index para establecer el orden de la representación inicial.

<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>

Answer 4

Otra forma de evitar esto es que puede crear un elemento padre y aplicar todas las demás transiciones relacionadas con él:

# 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>

JsFiddle

Answer 5

Un poco tarde para esto, pero trate de poner los elementos que han perdido su índice Z colocando lo siguiente, tuve un problema al hacer algunas cosas de paralaje recientemente y esto me ayudó masivamente.

transform-style: preserve-3d;

Esto ahorra poner

transform: translate3d(0,0,0);

En otros elementos que pone más tensión en la GPU

Answer 6

z-index funcionará contra los divs transformados en 3D si le -webkit-transform: translateZ(0px); estilo al elemento apilable con -webkit-transform: translateZ(0px);

Fragmento en el codepen -> http://codepen.io/mrmoje/pen/yLIul

En el ejemplo, los botones se stack up y stack down elevan y bajan el índice Z del pie de página (+/- 1) contra el elemento girado (un img en este caso).

Answer 7

Esperando ver el ejemplo

¿Has intentado hacer una escala de transformación (1)? Recuerdo que tuve un problema similar, y tuve que reorganizar el orden html de los elementos, y utilizar una transformación que no necesitaba simplemente porque el índice Z del uso de la transformación cambió.

Si no me equivoco, cada vez que utiliza una transformación, se convierte en el índice z más alto disponible, y está ordenado por el elemento más cercano de html al comienzo de la etiqueta. Entonces de abajo hacia arriba

Espero que esta ayuda