Как сбросить CSS3 * -трансформацию: translate (…)? - PullRequest
Новая
       12

Как сбросить CSS3 * -трансформацию: translate (…)?

52 голосов
/ 17 октября 2011

Как мне сбросить 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;?

Ответы [ 2 ]

87 голосов
/ 17 октября 2011

Согласно документации 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;
}
2 голосов
/ 21 ноября 2017

В Safari iOS 10.3 и 11.0 и Safari 11 в macOS на самом деле не удалось правильно сбросить преобразование с помощью -webkit-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);
...