Submitted by layalk on Tue, 20/06/2017 - 08:09
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.
LTR CSS:
.element1 { transform: translate(10px,5px); }
.element2 { transform: translate(-15px); }
.element3 { transform: translateX(5%); }
.element4 { transform: translateY(2em); }RTL CSS:
.element1 { transform: translate(-10px,5px); }
.element2 { transform: translate(15px); }
.element3 { transform: translateX(-5%); }
.element4 { transform: translateY(2em); /*do nothing here*/ }
Happy RTLing!