CSS3 ২D ট্রান্সফর্মেশন (2D Transformation) অফ এলিমেন্টস

২D ট্রান্সফর্ম ব্যবহার করে এলিমেন্টের কাঠামো পুনর্গঠন করা যায় — translate, rotate, scale, skew।

প্রধান ২D ট্রান্সফর্ম ফাংশন

উদাহরণ: ২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, 17, 0); border:2px solid black; 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): সরায়।
• scale(2, 1): প্রস্থ দ্বিগুণ।
• skew(20deg): টেঁটায়।

ম্যাট্রিক্স ট্রান্সফর্ম

`matrix(a, b, c, d, tx, ty)` — সব ট্রান্সফর্ম একসাথে ম্যাট্রিক্স হিসেবে প্রকাশ করা যায়।