RetroSearch Browse

Showing content from https://webplatform.github.io/docs/css/functions/translate below:

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

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.

The translation of element-1 visually is making no difference from its origin, because it has twice zero as translation-values.
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.
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);
}