The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< 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.


The 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);

View live example

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]