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.

1. The translation of the first element moves it 10 pixels up along the y-axis.
2. 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.
3. 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

See also

Related articles

Transforms

• inverse

• multiply

• rotate

• rotate3d()

• scale3d()

• skew()

• translate()

• translate3d()

• translateX()

• translateY()

• translateZ()

• backface-visibility

• transform-origin-z

• MSCSSMatrix

• translate

• JavaScript animation

External resources

• CSS Transforms Module, Level 3, Section 13.1
• Mathematical Description of Transform Functions
• Hands On: 2D Transforms

Attributions

• Microsoft Developer Network: [Windows Internet Explorer API reference Article]