২D ট্রান্সফর্ম ফাংশন ব্যবহার করে এলিমেন্টকে সরানো (translate), ঘুরানো (rotate), রিসাইজ (scale), এবং টেঁটানো (skew) করা যায়।
প্রধান ২D ট্রান্সফর্ম ফাংশন
| ক্রম | ফাংশন ও বর্ণনা |
|---|---|
| ১ | matrix(n,n,n,n,n,n) — ৬ মান দিয়ে ম্যাট্রিক্স ট্রান্সফর্ম |
| ২ | translate(x,y) — X এবং Y অক্ষ অনুযায়ী সরানো |
| ৩ | translateX(n) — শুধু X অক্ষ অনুযায়ী সরানো |
| ৪ | translateY(n) — শুধু Y অক্ষ অনুযায়ী সরানো |
| ৫ | scale(x,y) — প্রস্থ ও উচ্চতা পরিবর্তন |
| ৬ | scaleX(n) — শুধু প্রস্থ পরিবর্তন |
উদাহরণ: ২D ট্রান্সফর্ম ফাংশন
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
div { width: 100px; height: 100px; background-color: rgb(98, 0, 255); 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)।
