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
-
Economics & Finance
The CSS translate() Function
The CSS translate() function is used to reposition an element in horizontal and vertical directions. If you want to move an element from its current position along the X-axis and Y-axis, use the translate() function with the transform property.
Syntax
transform: translate(x, y);
Where x is the horizontal displacement and y is the vertical displacement. Both values can be in pixels, percentages, or other CSS length units.
Possible Values
| Parameter | Description |
|---|---|
x |
Horizontal displacement (required). Can be positive (right) or negative (left) |
y |
Vertical displacement (optional). Can be positive (down) or negative (up) |
Example: Translating Both X and Y Axes
The following example moves an element 50px to the right and 30px down −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
margin: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.translated {
transform: translate(50px, 30px);
background-color: #f44336;
}
</style>
</head>
<body>
<div class="container">
<div class="box">Original</div>
<div class="box translated">Translated</div>
</div>
</body>
</html>
Two boxes appear: a green "Original" box in its normal position, and a red "Translated" box moved 50px right and 30px down from where it would normally be positioned.
Example: Translating X-Axis Only
When only one value is provided, it applies to the X-axis only −
<!DOCTYPE html>
<html>
<head>
<style>
.text-container {
margin: 20px 0;
}
.text-item {
padding: 10px;
margin: 5px 0;
background-color: #e7f3ff;
width: 200px;
}
.moved-right {
transform: translate(80px);
background-color: #ffeb3b;
}
</style>
</head>
<body>
<div class="text-container">
<div class="text-item">Normal Position</div>
<div class="text-item moved-right">Moved 80px Right</div>
<div class="text-item">Normal Position</div>
</div>
</body>
</html>
Three text blocks appear, with the middle yellow block shifted 80px to the right while maintaining its vertical position in the normal document flow.
Example: Using Negative Values
Negative values move elements in the opposite direction −
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px;
max-width: 300px;
}
.grid-item {
width: 80px;
height: 80px;
background-color: #2196F3;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.move-up-left {
transform: translate(-20px, -15px);
background-color: #ff9800;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item move-up-left">Moved</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>
A 3x2 grid of blue squares appears, with the center-bottom orange square moved 20px left and 15px up from its original grid position.
Conclusion
The translate() function is perfect for repositioning elements without affecting the document flow. Use positive values to move right/down and negative values to move left/up.
212 Views
