Translate() CSS function

This function in CSS is a CSS in-built function. It relocates the element in the horizontal direction or in the vertical direction. It can move the items from the current direction on the basis of given parameters.

Syntax:

The above ty parameter is optional. When it is not described, its value will be estimated to be zero. We will discuss all the parameters as follows:

Parameters

tx: It depicts the length of the translation with the x-axis. This parameter will portray the translating vector’s abscissa (x-coordinate, horizontal). When we define translate(4), this function will be similar to the translate(4,0).

ty: It depicts the length of the translation with the y-axis. It has a default value, i.e., 0, applied if this parameter’s value is not specified.

Let’s discuss this function with some examples as follows:

Example:

In the following illustration, we will specify the parameter value tx only.

Output:

CSS translate() Function

Example:

Output:

CSS translate() Function

Pin It on Pinterest

Share This