transform: translate(tx, ty) ফাংশন দিয়ে এলিমেন্টকে X-अক্ষ (হরিজেন্টাল) এবং Y-अক্ষ (ভার্টিক্যাল) অনুযায়ী সরানো যায়। এটি লেআউট ফ্লোকে প্রভাবিত করে না (রিপেইন্ট মাত্র হয়, রিফ্লো নয়), তাই পারফরম্যান্সে ভালো।
উদাহরণ ১: দুটি প্যারাগ্রাফ ও ইমেজ ট্রান্সলেট
<!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="..." alt="MS Excel">
</body>
</html>
উদাহরণ ২: ইমেজ ১০০পিক্সেল ডানে, ৫০% নিচে
<!DOCTYPE html>
<html>
<head>
<style>
.translate_img { transform: translate(100px, 50%); }
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src="..." alt="MongoDB">
</body>
</html>
বিশেষ: translate3d(x, y, z) এবং translateX(), translateY(), translateZ() ও রয়েছে।
