The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type. This transformation is characterized by a two-dimensional vector. Its coordinates define how much the element moves in each direction.

Why do we use translation in CSS?

The CSS translate() function is used to move elements in a two-dimensional space. It moves the position of the element on the plane by the amount provided by tx and ty . The translate() function accepts two arguments, indicating how much to move the element along the x and y axes respectively.

What is translate y in CSS?

The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a <transform-function> data type. Note: translateY(ty) is equivalent to translate(0, ty) or translate3d(0, ty, 0) .