Adjust position left, right, up, down
translate
Apply simplified matrix algebra to shift an element left, right, up or down.
Property values
This is an alias for the transform
property. It may be specified in any of these forms:
syntax form | equivalent |
---|---|
translate: t | transform: translateX(t) translateX(t); |
translate: tx ty | transform: translateX(tx) translateY(ty); |
translate: tx ty tz | transform: translate3d(tx, ty, tz); |
Variable units
Positive values move the element right or down. Negative values move the element left or up.
Each of the values for (tx, ty, tz)
may be in any of these units:
% | percent | A percent of the element's width or height |
em | em | The font-size of the current font |
rem | relative em | The font-size of the <html> element |
in | inch | A size equal 96px |
px | pixels | A size equal to 1/96 inch |
pt | point | A size equal 1in/72 = 1.33px |
pc | pica | A size equal 1in/6 = 12pt = 16px |
cm | centimeter | A size equal to 96px/2.54 = 37.8px |
mm | millimeter | A size equal to 96px/25.4 = 3.8px |
Q | quarter millimeter | A size equal to 96px/1016 = 0.94px |