২D ট্রান্সফর্ম ফাংশন ব্যবহার করে এলিমেন্টকে সরানো (translate), রিসাইজ (scale), ঘুরানো (rotate), এবং টেঁটানো (skew) করা যায়।
প্রধান ফাংশন
- Translate: X এবং Y অক্ষ অনুযায়ী সরানো।
- Scale: X এবং Y দিক থেকে রিসাইজ।
- Rotate: নির্দিষ্ট ডিগ্রি ঘুরানো।
- Skew: X এবং Y দিক থেকে টেঁটানো।
উদাহরণ: ২D ট্রান্সফর্ম ফাংশন
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div { width: 100px; height: 100px; background-color: rgb(255, 0, 128); border:2px solid rgb(0, 35, 150); margin: 20px; display: inline-block; color: white; }
.rotate { transform: rotate(20deg); }
.translate { transform: translate(30px, 20px); }
.scale { transform: scale(2, 1); margin-left:70px; }
.skew { transform: skew(20deg); }
</style>
</head>
<body>
<h1>২D ট্রান্সফর্ম ফাংশন উদাহরণ</h1>
<div class="rotate">ROTATE()</div>
<div class="skew">SKEW()</div>
<div class="scale">SCALE()</div>
<div class="translate">TRANSLATE()</div>
</body>
</html>
কোড ব্যাখ্যা
- rotate(20deg): ২০ ডিগ্রি ঘুরায়।
- translate(30px, 20px): ডানে ৩০px, নিচে ২০px সরায়।
- scale(2, 1): প্রস্থ দ্বিগুণ, উচ্চতা অপরিবর্তিত।
- skew(20deg): ২০ ডিগ্রি টেঁটায়।
ট্রান্সফর্ম অরিজিন
`transform-origin: center center` (ডিফল্ট) — ট্রান্সফর্মের পিভট পয়েন্ট।
