¿Cómo puedo resetear CSS transform propiedades CSS translate valor?

Decir que tengo:

div.someclass {
    -webkit-transform: translate3d(0, -50%, 0);
       -moz-transform: translate(0, -50%);
        -ms-transform: translate(0,- 50%);
         -o-transform: translate(0, -50%);
            transform: translate3d(0, -50%, 0);
}

Entonces ¿cómo puedo borrar todas las transformaciones/traducciones?


Debo usar: translate(0, 0); /translate3d(0, 0, 0); o transform:auto; ?

InformationsquelleAutor knittl | 2011-10-17

2 Comentarios

  1. 88

    Como por la MDN documentación, el Valor inicial es none.

    Puede restablecer la transformación mediante:

    div.someclass {
        transform: none;
    }

    Utilizando proveedor prefijo:

    div.someclass {
        -webkit-transform: none; /* Safari and Chrome */
           -moz-transform: none; /* Firefox */
            -ms-transform: none; /* IE 9 */
             -o-transform: none; /* Opera */
                transform: none;
    }
  2. 2

    En Safari en iOS 10.3 y 11.0 y Safari 11 de macOS en realidad no restablecer la transformación correctamente con -webkit-transform: none; o transform: none;
    Tuve que en lugar de restablecimiento de todos los valores que he cambiado con la transformación de la propiedad así que, esencialmente, creo que la primera opción

    translate(0, 0); / translate3d(0, 0, 0);

    es el camino a seguir para la compatibilidad del navegador, por ahora.
    Así que esto DEBERÍA funcionar:

    -webkit-transform: translate(0, 0) translate3d(0, 0, 0);
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: translate(0, 0) translate3d(0, 0, 0);

Dejar respuesta

Please enter your comment!
Please enter your name here