0

Hola comunidad de Stackoverflow!

Como bien se observa en la imagen el problema es el por qué mi efecto 3D sobrepasa el z-index del div que tiene más próximo al usuario?¿ Esto solo me sucede en Safari, en los demás navegadores trabaja correctamente.

introducir la descripción de la imagen aquí

El div que contiene al div de la imagen de fondo, tiene como propiedad: z-index: 49; position: absolute; y el div que se ve recortado tiene propiedad: z-index: 50; position: absolute;

<div class="pieces" style="background-image: url("img/normal.jpg"); transition: transform 0.2s ease-out; transform: perspective(1000px) translate3d(2.05564px, 2px, 0px) rotate3d(1, 0, 0, 2deg) rotate3d(0, 1, 0, 1.02782deg);">

Y esto es lo que le aplico de efecto al div que contiene la imagen de fondo.

2 respuestas 2

2

Si le colocas a la imagen de fondo z-index - 1, debería funcionar dado que tu quieres la imagen al fondo.

Revisa está documentación me parece que te va ayudar:

https://tailwindcss.com/docs/z-index/

2
  • De hecho entiendo bien como funciona el z-index, el problema que me causa disgusto, es que el div que tiene le aplico la transición me distorsiona el div principal. Pero igual agradezco el link de ayuda :)
    – WTFChamp
    Commented el 1 ago. 2018 a las 4:45
  • Bienvenido a Stack Overflow en Español. Tu respuesta debería redactarse en mejor manera. Pedir mayores detalles que te permitan mejorar la calidad de tu respuesta lo puedes hacer en la parte de comentarios de la pregunta. Te recomiendo que leas este artículo: ¿Cómo escribo una buena respuesta?. Commented el 11 ago. 2018 a las 3:33
1

Los errores de z-index en safari se arreglan con:

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

Necesitaría ver tu código para decirte exactamente donde ponerlo, pero prueba añadiendo al elemento más bajo que creo que es donde está tu imagen de fondo en position:absolute

Quizás esta página te puede ayudar algo más: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

1
  • 1
    Qué tal amigo, al perecer creo que debí de checar en un principio la propiedad position y como trabaja con el z-index, he resuelto mi problema agradezco bastante tus comentarios al respecto, saludos :)
    – WTFChamp
    Commented el 1 ago. 2018 a las 20:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.