This page is Ready to Use

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



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


External resources