Как reset CSS3 * -transform: translate (...)?

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

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

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

Ответы

Ответ 1

В соответствии с документацией MDN Начальное значение none.

Вы можете reset преобразование, используя:

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

Ответ 2

В Safari iOS 10.3 и 11.0 и Safari 11 на macOS фактически не было reset правильное преобразование с -webkit-transform: none; или преобразовать: нет; Я должен был вместо reset всех значений, которые я изменил с помощью свойства 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);