অ্যানিমেটেড ওয়েব এলিমেন্ট তৈরি করা ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। উদাহরণস্বরূপ, আপনি একটি বাটন ডিজাইন করছেন যা আপনি চান ব্যবহারকারী বাটনের ওপর হোভার করলে স্কিউ (skew) হবে।
এখানেই CSS transform প্রোপার্টি কাজে আসে। transform প্রোপার্টি একটি ওয়েব পেজে এলিমেন্ট সরানো (move), ঘোরানো (rotate), স্কিউ (skew), এবং স্কেল (scale) করতে ব্যবহৃত হয়। এটি আপনাকে একটি ওয়েব পেজ ব্যবহারকারীর জন্য আরও ইন্টারঅ্যাক্টিভ (interactive) করতে দেয়।
এই টিউটোরিয়ালে উদাহরণসহ CSS-এ 2D ট্রান্সফর্ম (2D transforms) transform প্রোপার্টি ব্যবহার করে কীভাবে কাজ করতে হয় তা আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি CSS 2D ট্রান্সফর্ম ব্যবহারে এক্সপার্ট হবেন।
CSS 2D Transforms
CSS transform ফাংশন আপনাকে বেসিক ট্রান্সফর্ম অ্যানিমেশন তৈরি করতে দেয় যেমন রোটেশন (rotations), মুভমেন্ট (movements), স্কেল (scales), এবং স্কিউ (skews) একটি ওয়েব পেজে।
যখন একটি এলিমেন্ট ট্রান্সফর্ম করা হয়, এটি কোনো নিকটবর্তী এলিমেন্টকে প্রভাবিত করে না। যাইহোক, একটি ট্রান্সফর্ম করা এলিমেন্ট সেগুলিকে ওভারল্যাপ (overlap) করতে পারে, যদিও এটা এখনও তার ডিফল্ট লোকেশনスペেস (default location) একটি ওয়েব পেজে ঘেরে থাকে।
CSS-এ দুটি ধরনের ট্রান্সফর্ম রয়েছে: 2D এবং 3D। transform প্রোপার্টি দুই ধরনের ট্রান্সফরমেশন তৈরি করতে ব্যবহৃত হয়, কিন্তু এই আর্টিকেলে আমরা 2D ট্রান্সফর্মের ওপর ফোকাস করব।
CSS-এ ওয়েব এলিমেন্টগুলিতে প্রযোজ্য করা যেতে পারে কিছু 2D ট্রান্সফরমেশন। এগুলো হলো:
translate()scale()scaleX()scaleY()skew()skewX()skewY()matrix()rotate()
চলুন এই ট্রান্সফরমেশনগুলোর প্রতিটিকে আলাদা আলাদা ভাঙে দেখি, একটি উদাহরণের রেফারেন্স নিয়ে।
translate() ট্রান্সফরমেশন
translate() মেথড একটি এলিমেন্টকে এর বর্তমান পজিশন থেকে স্ক্রিনে একটি নতুন পজিশনে সরাতে ব্যবহৃত হয়।
translate() ফাংশন দুটি প্যারামিটার গ্রহণ করে: এলিমেন্ট কতটুকু পিক্সেল ডানদিকে যাবে, এবং এলিমেন্ট কতটুকু পিক্সেল নিচে যাবে।
এই মেথডের সিনট্যাক্স:
translate(xAxis, yAxis);
মান লইজिए আমাদের একটি বক্স আছে যা আমরা 25px ডানদিকে এবং 50px নিচে সরাতে চাই এর বর্তমান পজিশন থেকে। আমরা নিচের কোড ব্যবহার করে এই কাজটি সম্পন্ন করতে পারি:
index.html
<body>
<p>This is a paragraph of text.</p>
<div><p>This is a box that has been moved using the translate() method.</p></div>
</body>
styles.css
div { transform: translate(25px, 50px); background-color: lightblue; border: 3px solid black; }আমাদের কোডের আউটপুট:
[Result of code here]
আমাদের কোড ব্রেক ডাউন করা যাক। আমাদের HTML কোডে, আমরা দুটি প্যারাগ্রাফ টেক্সট তৈরি করেছি। প্রথম প্যারাগ্রাফ পেজের উপরে ظاهر হয়। দ্বিতীয় প্যারাগ্রাফ প্রথম প্যারাগ্রাফের নিচে ظاهر হয় এবং একটি <div> ট্যাগের মধ্যে এনক্লোজড (enclosed)।
আমাদের CSS কোডে, আমরা একটি স্টাইল সংজ্ঞায়িত করেছি যা আমাদের <div> ট্যাগে প্রযোজ্য। এই স্টাইল আমাদের <div> কে হালকা নীল রঙ দেয়, এবং আমাদের <div> বক্সকে একটি 3px-প্রস্থের স olid কালো বর্ডার দেয়। 덧붙ে, আমরা translate() ট্রান্সফরমেশনও ব্যবহার করেছি আমাদের বক্সকে 25px বামে এবং 50px নিচে সরাতে।
এখানে আমাদের কোড translate() ট্রান্সফরমেশন ছাড়া:
index.html
<body>
<p>This is a paragraph of text.</p>
<div><p>This is a box that has been moved using the translate() method.</p></div>
</body>
styles.css
div { background-color: lightblue; border: 3px solid black; }আমাদের কোডের আউটপুট:
[Code result here]
আপনি দেখতে পারেন, একটি translate() মেথড নির্দিষ্ট না করলে, আমাদের বক্স ওয়েব পেজে এর রেগুলার পজিশন ধরে রাখে।
rotate() ট্রান্সফরমেশন
rotate() ট্রান্সফরমেশন আপনাকে একটি এলিমেন্ট ক্লকওয়াইজ (clockwise) বা কাউন্টার-ক্লকওয়াইজ (counter-clockwise) ঘুরাতে দেয়। একটি আইটেম কতটুকু ঘুরানো হবে সেটি একটি দেওয়া ডিগ্রি (degree) মানের ওপর ভিত্তি করে।
rotate() ট্রান্সফরমেশনের সিনট্যাক্স নিম্নরূপ:
transform: rotate(Xdeg);
উপরের সিনট্যাক্সে, X বোঝায় আপনি কত ডিগ্রি দ্বারা একটি এলিমেন্ট ঘুরাতে চান। আপনি যদি একটি এলিমেন্ট ক্লকওয়াইজ দিক ঘুরাতে চান, তবে আপনাকে X-এর জন্য একটি পজিটিভ (positive) মান নির্দিষ্ট করা উচিত; অন্যথায়, আপনি যদি একটি এলিমেন্ট কাউন্টার-ক্লকওয়াইজ ঘুরাতে চান, তবে আপনাকে X-এর জন্য একটি 네가েটিভ (negative) মান নির্দিষ্ট করা উচিত।
মান লইজिए আমাদের একটি বক্স আছে যা আমরা 45 ডিগ্রি ঘুরাতে চাই। আমরা নিচের কোড ব্যবহার করে আমাদের বক্সটি ঘুরাতে পারি:
index.html
<div><p>This is a box that has been rotated.</p></div>
styles.css
div { transform: rotate(45deg); background-color: lightblue; border: 3px solid black; }আমাদের কোডের আউটপুট:
[Code result here]
আমাদের কোড ব্রেক ডাউন করা যাক। আমাদের HTML কোডে, আমরা একটি <div> বক্স তৈরি করেছি যা একটি প্যারাগ্রাফ টেক্সট ধারণ করে। আমাদের CSS কোডে, আমরা আমাদের বক্সে একটি হালকা নীল ব্যাকগ্রাউন্ড প্রযোজ্য করেছি এবং একটি 3px-প্রস্থের স olid কালো বর্ডার। আমরা আমাদের <div> বক্সকে 45 ডিগ্রি ক্লকওয়াইজ দিক ঘুরিয়েছি।
আপনি আমাদের কোডের রেজাল্টে দেখতে পারেন, আমরা যে বক্সটি তৈরি করেছি সেটি ঘুরানো হয়েছে। এখানে আমাদের প্রি-রোটেটেড (pre-rotated) এবং পোস্ট-রোটেটেড (post-rotated) বক্সের একটি তুলনা:
scale() ট্রান্সফরমেশন
scale() মেথড আপনাকে একটি এলিমেন্টের আকার বাড়ানো বা কমাতে দেয়।
scale() মেথডের সিনট্যাক্স নিম্নরূপ:
transform: scale(x, y);
scale ফাংশন আপনার নির্দিষ্ট মানগুলোের ওপর ভিত্তি করে একটি ইমেজের প্রস্থ (x) এবং উচ্চতা (y) প্রপোশনালি (proportionally) স্কেল করবে। আপনি যদি উচ্চতা স্কেলের জন্য কোনো মান নির্দিষ্ট না করেন, তবে scale() ফাংশন অনুমান করবে উচ্চতা স্কেলটি প্রস্থ স্কেলের সমান হওয়া উচিত।
মান লইজिए আমাদের একটি বক্স আছে যা আমরা এর মূল আকারের 1.5x স্কেল করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
index.html
<div><p>This is a box that has been scaled.</p></div>
styles.css
div { transform: scale(1.5, 1.5); background-color: lightblue; border: 3px solid black; }আমাদের কোডের আউটপুট:
[Code result here]
আমাদের HTML কোডে, আমরা একটি বক্স তৈরি করেছি যা একটি বাক্য টেক্সট ধারণ করে। আমাদের CSS কোডে, আমরা নির্দিষ্ট করেছি যে সকল <div> ট্যাগের একটি হালকা নীল ব্যাকগ্রাউন্ড এবং একটি 3px-প্রস্থের স olid কালো বর্ডার থাকবে। আমরা scale() মেথডও ব্যবহার করেছি আমাদের বক্সকে এর মূল আকারের 1.5x ফ্যাক্টর দ্বারা স্কেল আপ (scale up) করতে।
এখানে দুটি বক্সের আকার তুলনা করার একটি ইমেজ। সবচেয়ে ছোট বক্সের কোনো scale() মান নেই, এবং সবচেয়ে বড় বক্সের scale() 1.5 রয়েছে:
সবচেয়ে বড় বক্স, যাতে This is a box that has been scaled. টেক্সট রয়েছে, আমাদের মূল বক্সের 1.5x বড়।
scaleX() ট্রান্সফরমেশন
scaleX() ট্রান্সফরমেশন আপনাকে একটি এলিমেন্টের প্রস্থ বাড়ানো বা কমাতে দেয়। scaleX() ট্রান্সফরমেশনের সিনট্যাক্স হলো:
transform: scaleX(xValue);
xValue প্যারামিটার হলো সেই পরিমাণ যার দ্বারা আপনি একটি এলিমেন্টের প্রস্থ স্কেল করতে চান। মান লইজिए আপনার একটি বক্স আছে যার প্রস্থ আপনি 1.6 ফ্যাক্টর দ্বারা বাড়াতে চান। আপনি নিচের কোড ব্যবহার করে এই বক্সের আকার বাড়াতে পারেন:
index.html
<div><p>This is a box that has been scaled.</p></div>
styles.css
div { transform: scaleX(1.5); background-color: lightblue; border: 3px solid black; }আমাদের কোডের আউটপুট:
[Code result here]
এই উদাহরণে, আমাদের বক্সের প্রস্থ এর মূল প্রস্থের 1.5 গুণ বেড়ে গেছে।
scaleY() ট্রান্সফরমেশন
scaleY() ট্রান্সফরমেশন আপনাকে একটি এলিমেন্টের উচ্চতা বাড়ানো বা কমাতে দেয়। scaleY() একইভাবে কাজ করে scaleX() এর মত, কিন্তু এলিমেন্টের প্রস্থকে প্রভাবিত করার বদলে, scaleY() এলিমেন্টের উচ্চতা পরিবর্তন করে।
মান লইজिए আমরা একটি বক্সের উচ্চতা এর বর্তমান উচ্চতার অর্ধেক করে কমাতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
index.html
<div><p>This is a box that has been scaled.</p></div>
styles.css
div { transform: scaleY(0.5); background-color: lightblue; border: 3px solid black; }আমাদের কোডের আউটপুট:
[Code result here]
আমাদের কোডে, আমরা আমাদের বক্সের উচ্চতা (যেটি y-axis দ্বারা রিপ্রেজেন্ট করা হয়) 0.5 ফ্যাক্টর দ্বারা স্কেল ডাউন (scale down) করেছি। অন্য কথায়, আমাদের বক্স এর মূল উচ্চতার অর্ধেক।
skew() ট্রান্সফরমেশন
skew() ট্রান্সফরমেশন একটি এলিমেন্টকে এর x এবং y অক্ষের অনুদিশ নির্দিষ্ট কোণ দ্বারা স্কিউ (skew) করে।
skew() মেথডের সিনট্যাক্স নিম্নরূপ:
transform: skew(xValue, yValue);
xValue বোঝায় একটি এলিমেন্ট কতটুকু এর x-অক্ষের ওপর স্কিউ করা উচিত, এবং yValue বোঝায় একটি এলিমেন্ট কতটুকু এর y-অক্ষের ওপর স্কিউ করা উচিত। উভয় মানই ডিগ্রি (degrees) এ রিপ্রেজেন্ট করা উচিত।
যদি yValue এর জন্য কোনো মান নির্দিষ্ট না করা হয়, তবে y-অক্ষের ওপর কোনো স্কিউ প্রযোজ্য হবে না।
মান লইজिए আমরা একটি বক্সকে 10 ডিগ্রি এর x-অক্ষ এবং 15 ডিগ্রি এর y-অক্ষ দ্বারা স্কিউ করতে চাই। আমরা নিচের কোড ব্যবহার করে এটি করতে পারি:
index.html
<div><p>This is a box that has been skewed.</p></div>
styles.css
div { transform: skew(10deg, 15deg); background-color: lightblue; border: 3px solid black; }আমাদের কোডের আউটপুট:
এই উদাহরণে, আমরা আমাদের বক্সকে 10 ডিগ্রি x-অক্ষ এবং 15 ডিগ্রি y-অক্ষ দ্বারা স্কিউ করেছি।
skewX() এবং skewY() ট্রান্সফরমেশন
scale() মেথডের মত, skew() জন্যও দুটি সাব-মেথড রয়েছে যা একটি এলিমেন্টকে হয় x অথবা y অক্ষের ওপর স্কিউ করতে ব্যবহৃত হয়।
একটি এলিমেন্টকে শুধু এর X-অক্ষের ওপর স্কিউ করতে, আপনি skewX() মেথড ব্যবহার করতে পারেন। এই মেথডের সিনট্যাক্স নিম্নরূপ:
transform: skewX(xValue);
xValue হলো x-অক্ষের ওপর ডিগ্রির সংখ্যা যার দ্বারা একটি এলিমেন্ট স্কিউ করা উচিত।
একটি এলিমেন্টকে এর Y-অক্ষের ওপর স্কিউ করতে, আপনি skewY() মেথড ব্যবহার করতে পারেন। skewY() মেথডের সিনট্যাক্স হলো:
transform: skewY(yValue);
সুতরাং, আপনি যদি একটি এলিমেন্টকে 10 ডিগ্রি এর Y-অক্ষ দ্বারা স্কিউ করতে চান, তবে আপনি নিচের কোড ব্যবহার করতে পারেন:
div { transform: skewY(10deg); }matrix() ট্রান্সফরমেশন
matrix() ট্রান্সফরমেশন একটি এলিমেন্টে সকল 2D CSS ট্রান্সফরমেশন প্রযোজ্য করে। সুতরাং, matrix() ব্যবহার করা যেতে পারে translate, rotate, scale, এবং skew ট্রান্সফরমেশন প্রযোজ্য করতে।
matrix() ফাংশন ছয়টি প্যারামিটার গ্রহণ করে যা আপনাকে একটি এলিমেন্টে ট্রান্সফরমেশন প্রযোজ্য করতে দেয়। এই মেথডের সিনট্যাক্স নিম্নরূপ:
transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());
মান লইজिए আমরা একটি বক্স তৈরি করতে চাই যা নিচের ট্রান্সফরমেশনগুলো ব্যবহার করে:
- X-অক্ষের ওপর একটি স্কেল 1।
- Y-অক্ষের ওপর একটি স্কিউ 10 ডিগ্রি।
- X-অক্ষের ওপর একটি স্কিউ 10 ডিগ্রি।
- Y-অক্ষের ওপর একটি স্কেল 1.25।
- X-অক্ষের ওপর একটি মুভমেন্ট ("translate") 25px দ্বারা।
- Y-অক্ষের ওপর একটি মুভমেন্ট 25px দ্বারা।
আমরা এই ট্রান্সফরমেশনগুলোর প্রতিটিকে আলাদা আলাদা নির্দিষ্ট করতে পারি। যাইহোক, এটা করলে আমাদের অনেক আলাদা ট্রান্সফরমেশন লিখতে হবে। বদলে, আমরা matrix() মেথড ব্যবহার করতে পারি এই ট্রান্সফরমেশনগুলো কোডের এক লাইনে লিখতে।
এখানে যে কোডটি আমরা ব্যবহার করতে পারি আমাদের বক্সটি উপরে উল্লিখিত ট্রান্সফরমেশনসহ তৈরি করার জন্য:
index.html
<div><p>This is a box that has been skewed.</p></div>
styles.css
div { transform: matrix(1, 10, 10, 1.25, 25, 25); background-color: lightblue; border: 3px solid black; }আমাদের কোডের আউটপুট:
[Code result here]
আমাদের কোডে, আমরা আমাদের বক্সে একটি স্কিউ, স্কেল, এবং ট্রান্সলেট ট্রান্সফরমেশন প্রযোজ্য করেছি। আমরা এটা matrix() মেথড ব্যবহার করে এবং আগে নির্দিষ্ট করা মানগুলো পাস করে সম্পন্ন করেছি।
উপসংহার (Conclusion)
transform প্রোপার্টি CSS-এ একটি এলিমেন্টে ট্রান্সফরমেশন প্রযোজ্য করতে ব্যবহৃত হয়। CSS অনেক 2D ট্রান্সফরমেশন অফার করে, যার মধ্যে রয়েছে স্কিউ (skew), স্কেল (scale), রোটেট (rotate), এবং ট্রান্সলেট (translate), যেগুলি ওয়েব এলিমেন্ট ট্রান্সফর্ম করতে ব্যবহৃত হয়।
এই টিউটোরিয়ালে, উদাহরণের রেফারেন্স নিয়ে, 2D CSS ট্রান্সফরমেশনের বেসিক অন্বেষণ করা হয়েছে। এখন আপনি আপনার নিজস্ব 2D ট্রান্সফরমেশন পেশাদার ওয়েব ডেভেলপারের মত তৈরি করা শুরু করার জন্য প্রস্তুত।
