CSS 如何重置 CSS3 *-transform: translate(...)？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7790617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reset CSS3 *-transform: translate(…)?
提问by knittl
How can I reset CSS transformproperties CSS translatevalue?
如何重置 CSStransform属性 CSStranslate值？
Say I have:
说我有：
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);
}
Then how do I clear all transformations/translations?
那么如何清除所有转换/翻译？
Should I use:translate(0, 0);/ translate3d(0, 0, 0);ortransform:auto;?
我应该使用：translate(0, 0);/translate3d(0, 0, 0);还是transform:auto;？
回答by Simone
As per the MDN documentation, the Initial valueis none.
You can reset the transformation using:
您可以使用以下方法重置转换：
div.someclass {
transform: none;
}
Using vendor prefix:
使用供应商前缀：
div.someclass {
-webkit-transform: none; /* Safari and Chrome */
-moz-transform: none; /* Firefox */
-ms-transform: none; /* IE 9 */
-o-transform: none; /* Opera */
transform: none;
}
回答by Brandito
Safari iOS 10.3, 11.0 and Safari 11 on macOS didn't actually reset the transformation properly with -webkit-transform: none;or transform: none;I had to instead reset all the values I changed with the transform property so essentially I think the first option
macOS 上的 Safari iOS 10.3、11.0 和 Safari 11 实际上并没有正确重置转换，-webkit-transform: none;或者transform: none;我不得不重置我使用转换属性更改的所有值，所以基本上我认为第一个选项
translate(0, 0); / translate3d(0, 0, 0);
is the way to go for browser compatibility for now. So this SHOULD work:
是目前浏览器兼容性的方法。所以这应该有效：
-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);
