How to reset CSS3 *-transform: translate(…)?
As per the MDN documentation, the Initial value is 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;
}
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
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);