RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

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

translateY() · WebPlatform Docs

translateY() Summary

Transform function for a 2d translation which moves an element on the y-axis by the given value. Note that the y-axis increases vertically downwards: positive lengths shift the element down, while negative lengths shift it up.

Syntax

translateY( <translation-value> )

Parameters

translation-value

Value for the translation across the y-axis. Can be a length or a percentage value.

Examples

The example shows three div elements, that are transformed individually with the translateY() function.

The translation of the first element moves it 10 pixels up along the y-axis.
You can also provide a negative value. In this case, element-2 is moved 20 pixels to the top, in the negative direction on the y-axis.
Using a percentage value of 50 percent moves element-3 in positive y-direction by a value which matches 50 percent of the element-3’s width. In this case element-3 has a 100 pixel width, so it is moved 50 pixels up.

.element-1 {
    transform: translateY(10px);
}

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

.element-3 {
    transform: translateY(50%);
}

View live example