The translate transformation function in CSS is part of the transform property, which allows you to modify the position of an element. The translate function specifically moves an element from its current position along the X and Y axes.
Syntax
transform: translate(x, y);
Where:
1. x is the distance to move the element along the horizontal axis (X-axis). It can be specified in pixels (px), percentages (%), or other units. +ve value move towards right, and -ve value move towards left.
2. y is the distance to move the element along the vertical axis (Y-axis). Similarly, it can be in pixels (px), percentages (%), or other units.
The behavior of the translate function in CSS is relative to the element's current position within its own coordinate system,
translate_function.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .box { width: 100px; height: 100px; background-color: blue; transform: translate(50px, 100px); } .box-translateX { width: 100px; height: 100px; background-color: red; transform: translateX(250px); } .box-translateY { width: 100px; height: 100px; background-color: green; transform: translate(150px, 10px); } </style> </head> <body> <div class="box"></div> <div class="box-translateX"></div> <div class="box-translateY"></div> </body> </html>
No comments:
Post a Comment