No es realmente el z-index, pero he encontrado que el mejor modo de describir el problema en un título corto…

Ver este ejemplo simplificado:

http://jsfiddle.net/sCnDx/

Si pasa el ratón sobre las imágenes, se nota que algunos de los rincones están por debajo de otras imágenes.

Si se quita el código correspondiente a la rotación, que todo está funcionando bien.. Así que el problema es que la rotación o cómo interactúa con la escala.

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);

Hay algo que se puede hacer acerca de esto o es un error del navegador?

(Probado en safari)

Gracias,
Wesley

InformationsquelleAutor Wesley | 2011-09-15

2 Comentarios

  1. 8

    @wesley giv e position:relative a tus imágenes como esta :

        img {
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg);
    
            -webkit-transition: -webkit-transform .15s linear;
            -moz-transition: -moz-transform .15s linear;
            -o-transition: -o-transform .15s linear;
            transition: transform .15s linear;
            position:relative;
        }
    a img:hover {
        -webkit-transform: scale(1.25) !important;
        -moz-transform: scale(1.25) !important;
        -o-transform: scale(1.25) !important;
        transform: scale(1.25) !important;
        position: relative;
        z-index: 2;
    }

    porque z-index sólo funcionan en position relative, absolute & fixed.

    comprobar este violín http://jsfiddle.net/sandeep/sCnDx/3/

    • mejor respuesta sobre este tema. Para todo el mundo en busca de la «traducir mete z-index» del tema, es necesario definir sus propiedades de posición antes de que correctamente, que no tiene el problema !

Dejar respuesta

Please enter your comment!
Please enter your name here