translateY() – CSS: Cascading Style Sheets


transform: translateY(200px); transform: translateY(50%);

Values

The value is a or representing the ordinate of the translating vector. A percentage value refers to the height of the reference box defined by the transform-box property.

Cartesian coordinates on ℝ^2 Homogeneous coordinates on ℝℙ^2 Cartesian coordinates on ℝ^3 Homogeneous coordinates on ℝℙ^3

A translation is not a linear transformation in ℝ^2 and can’t be represented using a Cartesian-coordinate matrix.

10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]

Formal syntax

translateY()

HTML

Static
Moved
Static

CSS

div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translateY(10px); background-color: pink; }

Result

BCD tables only load in the browser

Source

Leave a comment

Your email address will not be published. Required fields are marked *