CSS translate() function
CSS is all about presentation. Discover how CSS translate() function works to transform plain HTML into a premium user experience in the guide below.
The translate function is a built-in feature of CSS that shifts the element either vertically or horizontally. It adjusts the element's position according to the specified parameters.
Syntax
transform: translate(tx)
transform: translate(tx,ty)
The parameter ty is not mandatory. If no value is provided, it defaults to zero. Next, we will explore each parameter extensively.
Parameters
This parameter specifies the length of translation on the x-axis, denoting the abscissa (horizontal, x-coordinate) of the translation vector. When using translate(4), it is the same as translate(4,0).
It specifies the length of translation that aligns with the y-axis. By default, it is set to 0, serving as the value when this parameter is unspecified.
Let's grasp the concept of this function with the help of visual aids.
Example1
In this instance, we will specifically establish the value of the parameter tx.
<!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= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<h2>Translated Image</h2>
<img class="trans" src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</body>
</html>
Example2
<!DOCTYPE html>
<html>
<head>
<title>translate() function</title>
<style>
.trans {
transform: translate(200px,100px);
</style>
</head>
<body>
<h2>Original Image</h2>
<img src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
<h2>Translated Image</h2>
<img class="trans" src= "https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image">
</body>
</html>
