Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to reset CSS3 *-transform: translate(…)?

How can I reset CSS transform properties CSS translate value?

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); or transform:auto; ?

like image 845
knittl Avatar asked Oct 17 '11 07:10

knittl


People also ask

What does transform translate () do?

An introduction to transform and translate CSS transform is a powerful tranformation property. By using its various functions, you can scale, rotate, skew, or translate HTML elements. One of the most commonly used functions is CSS translate which allows you to move elements.

How does transform work in CSS?

Definition and Usage. The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.

What does translate in CSS mean?

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.


2 Answers

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; } 
like image 64
Simone Avatar answered Sep 16 '22 20:09

Simone


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); 
like image 22
brandito Avatar answered Sep 18 '22 20:09

brandito