translate() – CSS: Cascading Style Sheets

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a data type.

This transformation is characterized by a two-dimensional vector. Its coordinates define how much the element moves in each direction.

transform: translate(200px); transform: translate(50%); transform: translate(100px, 200px); transform: translate(100px, 50%); transform: translate(30%, 200px); transform: translate(30%, 50%);

Values

Single values This value is a or representing the abscissa (horizontal, x-coordinate) of the translating vector. The ordinate (vertical, y-coordinate) of the translating vector will be set to 0. For example, translate(2px) is equivalent to translate(2px, 0). A percentage value refers to the width of the reference box defined by the transform-box property. Double values This value describes two or values representing both the abscissa (x-coordinate) and the ordinate (y-coordinate) of the translating vector. A percentage as first value refers to the width, as second part 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.

10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]

Formal syntax

translate( , ?)

Using a single-axis translation

HTML

Static
Moved
Static

CSS

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

Result

Combining y-axis and x-axis translation

HTML

Static
Moved
Static

CSS

div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px, 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 *