css - CSS3をリセットする方法*-transform：translate（…）？

Question

transformCSSプロパティのCSStranslate値をリセットするにはどうすればよいですか？

私が持っていると言う：

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

Answer 1

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

Answer 2

macOS上のSafariiOS10.3、11.0、およびSafari 11は、実際には変換を適切にリセットしませんでした。-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);