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

transform: translate(tx)
transform: translate(tx,ty)

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.

<!DOCTYPE html>
<html>
<head>
<title>translate() function</title>
<style>
.trans {
   transform: translate(200px); /*It is equal to translate(200px,0)*/
}
</style>
</head>
<body>
<h2>Original Image</h2>
<img src= "jtp.png">
<h2>Translated Image</h2>
<img class="trans" src= "jtp.png">
</body>
</html>

Test it Now

Example2

<!DOCTYPE html>
<html>
<head>
<title>translate() function</title>
<style>
.trans {
   transform: translate(200px,100px); 
</style>
</head>
<body>
<h2>Original Image</h2>
<img src= "jtp.png">
<h2>Translated Image</h2>
<img class="trans" src= "jtp.png">
</body>
</html>

Test it Now

Next TopicCSS Gradient

← prev next →