< css‎ | functions
Jump to: navigation, search


This article is Ready to Use.


Transform function for a 2d translation which sets the position of an element to a new one, described by two vectors (x, y). The y value is optional.


  • translate ( <translation-value-x> )
  • translate ( <translation-value-x>, <translate-value-y> )



Value for the translation across the x-axis. Can be a length value or a percentage value. Value for the y-axis translation is assumed to be zero.

translation-value-x, translate-value-y

First value describes the translation across the x-axis, the second across the y-axis. Values can be a length or a percentage value.


There is no data available for topic "css", feature "translate()". If you think that there should be data available, consider opening an issue.


View live exampleThe example shows three div elements, that are transformed individually with the translate() function.

  1. The translation of element-1 visually is making no difference from its origin, because it has twice zero as translation-values.
  2. The second translation only provides a single translation-value-x, the second value is set to zero by default here. The div moves 20px to the right.
  3. For element-3 both translation-values are set. The div is moved 40px to the right and 80px down.


.element-1 {
	transform: translate(0, 0);

.element-2 {
	transform: translate(20px);

.element-3 {
	transform: translate(40px, 80px);

See also

Related articles


  • translate()

External resources


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]