Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
The CSS translate() Function
The translate() function in CSS is used to reposition an element in a horizontal and vertical direction. If you want to move an element from the current position along the X- and the Y-axis, use the translate() function.
Syntax
The syntax is as follows −
Transform: translate(x, y)
Above, transform the element along with x-axis and y-axis.
Translate an image
In this example, we will translate i.e., move an image using the translate() method. Set it using the transform property −
.translate_img {
transform: translate(50px, 20px);
}
Example
Let us now see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
transform: translate(50px, 20px);
}
</style>
</head>
<body>
<h1>Learn JavaScript</h1>
<h2>Original Image</h2>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h2>Moved Image (Translate)</h2>
<img class="translate_img" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
Translate an image along x axis
In this example, we will translate i.e., move an image along x-axis using the translate() method. Set only the 1st parameter for the X-axis −
.translate_img {
transform: translate(100px);
}
Example
Let us now see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
transform: translate(100px);
}
</style>
</head>
<body>
<h1>Learn JavaScript</h1>
<h2>Original Image</h2>
<img src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h2>Moved Image (Translate along x-axis)</h2>
<img class="translate_img" src="https://www.tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
Translate an element
To translate an element, we have used the transform property with the translate() function. Set the same for the image css class set here −
#demo6 {
transform: translate(90px, 30px);
}
Example
Let us now see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: translate(90px, 30px);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
Translate an element along x axis
To translate an element along the x-axis, set only the 1st parameter of the translate(). We have used the transform property with the translate() function −
#demo6 {
transform: translate(50px);
}
Example
Let us now see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: translate(50px);
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
204 Views
