You are here

Quick Tip: RTLing the CSS3 transform functions: translate and translateX

When using the CSS3 transofms, the function "translates" comes really handy in positioning the blocks:

The translate() CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.1

The syntax is:

translate(tx) or
translate(tx, ty)

There's also translateX which is a shorthand for translate(tx,0)2. Another shorthand is the translateY, which is a shorthand for translate(x,ty), but we're not going to bother it as it's affects the position of the element vertically on the plane3.

When we want to RTL translate functions, we only look for the tx value. Simply multiply the tx value by -1 to get the mirrored transformation.


.element1 { transform: translate(10px,5px); }
.element2 { transform: translate(-15px); }
.element3 { transform: translateX(5%); }
.element4 { transform: translateY(2em); }


.element1 { transform: translate(-10px,5px); }
.element2 { transform: translate(15px); }
.element3 { transform: translateX(-5%); }
.element4 { transform: translateY(2em); /*do nothing here*/ }


Happy RTLing!

No votes yet