web-dev-qa-db-fra.com

Comment réinitialiser CSS3 * -transform: translate (…)?

Comment puis-je réinitialiser la valeur CSS transform des propriétés CSS translate?

Dis que j'ai:

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);
}

Comment puis-je effacer toutes les transformations/traductions?

Dois-je utiliser:translate(0, 0);/translate3d(0, 0, 0);otransform:auto;?

css3resetcss-transforms
52
knittl

Selon le documentation MDN , le valeur initiale est none.

Vous pouvez réinitialiser la transformation en utilisant: 

div.someclass {
    transform: none;
}

Utilisation du préfixe du fournisseur: 

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

Dans Safari iOS 10.3 et 11.0 et Safari 11 sur macOS n'a pas réellement réinitialisé la transformation correctement avec -webkit-transform: none; ou transformer: aucun; J'ai dû à la place réinitialiser toutes les valeurs que j'ai modifiées avec la propriété transform, donc je pense essentiellement que la première option

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

est la voie à suivre pour la compatibilité du navigateur pour l'instant. Donc, cela DEVRAIT fonctionner:

-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);
2
Brandito