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

Examples

/* Move 100 pixels right and 10 pixels down */            
translate: 100px 10px;
translate
0

style > transform > translateAdjust position left, right, up, down

🔗 🔎