The translate() function in CSS is used to reposition an element in a horizontal and vertical direction.
Example
Let us now see an example −
<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} .translate_img { transform: translate(50px, 0); } </style> </head> <body> <h1>Learn</h1> <p id="demo1">Excel vlookup</p> <p id="demo2">Excel filters</p> <h4>Learn Excel</h4> <img class="translate_img" src= "https://www.tutorialspoint.com/videotutorials/assets/videos/courses/42/images/course_42_image.png" alt="MS Excel"> </body> </html>
Output
Example
Let us now see another example −
<!DOCTYPE html> <html> <head> <style> .translate_img { transform: translate(100px, 50%); } </style> </head> <body> <h1>Learn</h1> <img class="translate_img" src= "https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png" alt="MongoDB"> </body> </html>