This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

translate()

Summary

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.

Syntax

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

Parameters

translation-value-x

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.

Examples

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

Transforms

External resources

Attributions