如何重置CSS3 * -transform：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; ？

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

在Safari中，iOS 10.3和11.0以及macOS上的Safari 11并没有真正使用-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);