CSS translate() फ़ंक्शन

translate() फ़ंक्शन

CSS में translate() फ़ंक्शन का उपयोग किसी एलिमेंट को क्षैतिज और लंबवत दिशा में पुनः स्थापित करने के लिए किया जाता है।

उदाहरण 1

<!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>

आउटपुट

उदाहरण 2

<!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>

आउटपुट