Блог

Как я могу сбросить CSS transform properties translate Значение CSS?

Скажем, у меня есть:

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

Тогда как мне очистить все преобразования / переводы?

Должен ли я использовать: translate(0, 0); / translate3d(0, 0, 0); или transform:auto; ?

Согласно документации MDN, начальное значение равно none .

Вы можете сбросить преобразование с помощью:

 div.someclass {
    transform: none;
}
  

Использование префикса поставщика:

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

Safari iOS 10.3, 11.0 и Safari 11 на macOS на самом деле не сбросили преобразование должным образом, -webkit-transform: none; или transform: none; мне пришлось вместо этого сбросить все значения, которые я изменил с помощью свойства transform, поэтому, по сути, я думаю, что первый вариант

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

это путь к совместимости с браузером на данный момент.
Так что это ДОЛЖНО сработать:

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