CSS translate() function
The translate() function is an in-built function of CSS to repositions the element either in the vertical or in the horizontal direction. It moves the element from its current direction based on the given parameters.
Syntax
The parameter ty is optional. If it is not specified, its value is assumed to be zero. Now, we are going to discuss each parameter in detail.
Parameters
tx: This parameter defines the translation length along the x-axis. It represents the abscissa (horizontal, x-coordinate) of the translating vector. If we write translate(4), then it will be equivalent to translate(4,0).
ty: It defines the translation length corresponding to the y-axis. Its default value is 0, which is used when the value of this parameter is not defined.
Let’s understand this function using some illustrations.
Example1
In this example, we are going to define the value of the parameter tx only.
Example2