অ্যানিমেটেড ওয়েব উপাদান তৈরি করা ওয়েব ডিজাইনের একটি গুরুত্বপূর্ণ বৈশিষ্ট্য। উদাহরণস্বরূপ, আপনি এমন একটি বোতাম ডিজাইন করছেন যা ব্যবহারকারী যখন বোতামটির উপর ঘোরায় তখন আপনি তির্যক করতে চান।
সেখানেই CSS ট্রান্সফর্ম প্রপার্টি আসে। ট্রান্সফর্ম প্রপার্টিটি ওয়েব পেজে এলিমেন্ট সরানো, ঘোরানো, স্ক্যু এবং স্কেল করার জন্য ব্যবহার করা হয়। এটি আপনাকে ব্যবহারকারীর জন্য একটি ওয়েব পৃষ্ঠাকে আরও ইন্টারেক্টিভ করতে দেয়।
এই টিউটোরিয়ালটি উদাহরণ সহ আলোচনা করবে কিভাবে ট্রান্সফর্ম প্রপার্টি ব্যবহার করে CSS এ 2D ট্রান্সফর্মের সাথে কাজ করা যায়। এই টিউটোরিয়ালটি পড়ার শেষে, আপনি CSS 2D রূপান্তর ব্যবহারে একজন বিশেষজ্ঞ হবেন।
CSS 2D রূপান্তর
CSS ট্রান্সফর্ম ফাংশন আপনাকে একটি ওয়েব পৃষ্ঠায় ঘূর্ণন, নড়াচড়া, স্কেল এবং স্কুয়ের মতো মৌলিক রূপান্তর অ্যানিমেশন তৈরি করতে দেয়।
যখন একটি উপাদান রূপান্তরিত হয়, তখন এটি কাছাকাছি কোনো উপাদানকে প্রভাবিত করে না। যাইহোক, একটি রূপান্তরিত উপাদান তাদের ওভারল্যাপ করতে পারে, যদিও এটি এখনও একটি ওয়েব পৃষ্ঠায় তার ডিফল্ট অবস্থানে স্থান গ্রহণ করবে।
CSS-এ দুটি ধরনের রূপান্তর রয়েছে:2D এবং 3D। ট্রান্সফর্ম সম্পত্তি উভয় ধরনের রূপান্তর তৈরি করতে ব্যবহৃত হয়, তবে এই নিবন্ধের জন্য আমরা 2D রূপান্তরগুলিতে ফোকাস করতে যাচ্ছি।
অনেকগুলি 2D রূপান্তর রয়েছে যা CSS-এর ওয়েব উপাদানগুলিতে প্রয়োগ করা যেতে পারে। এইগুলো:
- অনুবাদ()
- স্কেল()
- scaleX()
- scaleY()
- Skew()
- skewX()
- skewY()
- ম্যাট্রিক্স()
- ঘোরান()
আসুন একটি উদাহরণের সাথে এই প্রতিটি রূপান্তরকে পৃথকভাবে ভেঙে ফেলি।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
অনুবাদ() রূপান্তর
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 কোডে, আমরা পাঠ্যের দুটি অনুচ্ছেদ তৈরি করেছি। প্রথম অনুচ্ছেদটি পৃষ্ঠার শীর্ষে প্রদর্শিত হবে। দ্বিতীয় অনুচ্ছেদটি প্রথম অনুচ্ছেদের নীচে প্রদর্শিত হয় এবং একটি
আমাদের CSS কোডে, আমরা একটি শৈলী সংজ্ঞায়িত করেছি যা আমাদের
এখানে একটি অনুবাদ() রূপান্তর নির্দিষ্ট করা ছাড়াই আমাদের কোড:
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()-এর সিনট্যাক্স রূপান্তর নিম্নরূপ:
transform: rotate(Xdeg);
উপরের সিনট্যাক্সে, X বলতে ডিগ্রীর সংখ্যা বোঝায় যার দ্বারা আপনি একটি উপাদান ঘোরাতে চান। আপনি যদি ঘড়ির কাঁটার দিকে একটি উপাদান ঘোরাতে চান, তাহলে আপনাকে X এর জন্য একটি ধনাত্মক মান উল্লেখ করতে হবে; অন্যথায়, আপনি যদি একটি উপাদান ঘড়ির কাঁটার বিপরীত দিকে ঘোরাতে চান, তাহলে আপনাকে X-এর জন্য একটি ঋণাত্মক মান উল্লেখ করতে হবে।
ধরুন আমাদের একটি বাক্স আছে যাকে আমরা 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 কোডে, আমরা একটি
আপনি আমাদের কোডের ফলাফলে দেখতে পাচ্ছেন, আমাদের তৈরি বাক্সটি ঘোরানো হয়েছে। এখানে আমাদের পূর্ব-ঘোরানো এবং পোস্ট-ঘোরানো বাক্সগুলির একটি তুলনা:
স্কেল() রূপান্তর
scale() পদ্ধতিটি আপনাকে একটি উপাদানের আকার বাড়াতে বা হ্রাস করতে দেয়।
স্কেল() পদ্ধতির সিনট্যাক্স নিম্নরূপ:
transform: scale(x, y);
স্কেল ফাংশনটি আপনার নির্দিষ্ট করা মানগুলির উপর ভিত্তি করে একটি চিত্রের প্রস্থ (x) এবং উচ্চতা (y) আনুপাতিকভাবে স্কেল করবে। আপনি উচ্চতা স্কেলের জন্য একটি মান নির্দিষ্ট না করলে, স্কেল() ফাংশনটি অনুমান করবে যে উচ্চতা স্কেল প্রস্থ স্কেলের সমান হওয়া উচিত।
ধরুন আমাদের একটি বাক্স আছে যা আমরা তার আসল আকারকে 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 কোডে, আমরা নির্দিষ্ট করেছি যে সমস্ত
এখানে দুটি বাক্সের আকারের তুলনা করে একটি চিত্র রয়েছে৷ সবচেয়ে ছোট বাক্সের কোনো স্কেল() মান নেই, এবং বৃহত্তম বাক্সের স্কেল() 1.5:
সবচেয়ে বড় বাক্স, যেটিতে পাঠ্য রয়েছে This is a box that has been scaled. আমাদের আসল বাক্সের মতো 1.5x বড়।
স্কেলএক্স() রূপান্তর
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() রূপান্তর আপনাকে একটি উপাদানের উচ্চতা বাড়াতে বা হ্রাস করতে দেয়। স্কেলওয়াই() স্কেলএক্স() এর মতো একইভাবে কাজ করে, তবে একটি উপাদানের প্রস্থকে প্রভাবিত করার পরিবর্তে, স্কেলওয়াই() উপাদানটির উচ্চতা পরিবর্তন করে।
ধরুন আমরা একটি বাক্সের উচ্চতা তার বর্তমান উচ্চতার অর্ধেক কমাতে চেয়েছিলাম। আমরা এই কোড ব্যবহার করে তা করতে পারি:
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 অক্ষ দ্বারা উপস্থাপিত হয়) 0.5 এর একটি ফ্যাক্টর দ্বারা ছোট করেছি। অন্য কথায়, আমাদের বাক্সটি তার আসল উচ্চতার অর্ধেক।
Skew() রূপান্তর
skew() রূপান্তর একটি উপাদানকে তার x এবং y অক্ষ বরাবর নির্দিষ্ট কোণ দ্বারা skews।
skew() পদ্ধতির সিনট্যাক্স নিম্নরূপ:
transform: skew(xValue, yValue);
xValue বোঝায় একটি উপাদানকে তার x অক্ষে কতটা তির্যক করা উচিত এবং yValue বোঝায় একটি উপাদানকে তার y অক্ষের উপর কতটা তির্যক করা উচিত। উভয় মান ডিগ্রী প্রতিনিধিত্ব করা উচিত.
যদি yValue-এর জন্য একটি মান নির্দিষ্ট করা না থাকে, তাহলে y অক্ষে কোনো তির্যক প্রয়োগ করা হবে না।
ধরুন আমরা একটি বাক্সকে তার x অক্ষের উপর 10 ডিগ্রি এবং তার y অক্ষে 15 ডিগ্রি তির্যক করতে চাই। আমরা এই কোড ব্যবহার করে তা করতে পারি:
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;
}
আমাদের কোড ফিরে আসে:
এই উদাহরণে, আমরা x অক্ষের উপর 10 ডিগ্রী এবং y অক্ষের উপর 15 ডিগ্রী দ্বারা আমাদের বাক্সটিকে তির্যক করেছি।
skewX() এবং skewY() রূপান্তর
যেমন scale() পদ্ধতি, skew() দুটি উপ পদ্ধতির সাথে আসে যা একটি উপাদানের x বা y অক্ষ জুড়ে একটি উপাদানকে তিরস্কার করতে ব্যবহৃত হয়।
শুধুমাত্র X অক্ষ জুড়ে একটি উপাদানকে তিরস্কার করতে, আপনি skewX() পদ্ধতি ব্যবহার করতে পারেন। এই পদ্ধতির সিনট্যাক্স নিম্নরূপ:
transform: skewX(xValue);
xValue হল x অক্ষের ডিগ্রীর সংখ্যা যার দ্বারা একটি উপাদানকে তির্যক করা উচিত।
একটি উপাদানকে তার Y অক্ষ জুড়ে ske করতে, আপনি skewY() পদ্ধতি ব্যবহার করতে পারেন। skewY() পদ্ধতির সিনট্যাক্স হল:
transform: skewY(yValue);
সুতরাং, আপনি যদি একটি উপাদানকে তার Y অক্ষের উপর 10 ডিগ্রি তির্যক করতে চান তবে আপনি এই কোডটি ব্যবহার করতে পারেন:
div {
transform: skewY(10deg);
}
ম্যাট্রিক্স() রূপান্তর
matrix() রূপান্তর একটি উপাদানের সমস্ত 2D CSS রূপান্তর সম্পাদন করে। সুতরাং, ম্যাট্রিক্স() অনুবাদ, ঘূর্ণন, স্কেল এবং তির্যক রূপান্তর প্রয়োগ করতে ব্যবহার করা যেতে পারে।
ম্যাট্রিক্স() ফাংশন ছয়টি প্যারামিটার গ্রহণ করে যা আপনাকে একটি উপাদানে রূপান্তর প্রয়োগ করতে দেয়। এই পদ্ধতির সিনট্যাক্স নিম্নরূপ:
রূপান্তর:matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());
ধরুন আমরা একটি বাক্স তৈরি করতে চেয়েছিলাম যা নিম্নলিখিত রূপান্তরগুলি ব্যবহার করে:
- 1 এর X অক্ষের উপর একটি স্কেল।
- 10 ডিগ্রির Y অক্ষের উপর একটি তির্যক।
- 10 ডিগ্রির X অক্ষের উপর একটি তির্যক।
- 1.25 এর Y অক্ষের একটি স্কেল।
- X অক্ষে 25px দ্বারা একটি আন্দোলন ("অনুবাদ")।
- 25px দ্বারা Y অক্ষের উপর একটি আন্দোলন।
আমরা পৃথকভাবে এই রূপান্তর প্রতিটি নির্দিষ্ট করতে পারে. যাইহোক, এটি করার ফলে আমাদের অনেকগুলি পৃথক রূপান্তর লিখতে হবে। পরিবর্তে, আমরা কোডের একটি লাইন ব্যবহার করে এই রূপান্তরগুলি লিখতে ম্যাট্রিক্স() পদ্ধতি ব্যবহার করতে পারি।
পূর্বোক্ত রূপান্তরগুলির সাথে আমাদের বক্স তৈরি করতে আমরা যে কোডটি ব্যবহার করতে পারি তা এখানে:
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]
আমাদের কোডে, আমরা আমাদের বাক্সে একটি তির্যক, স্কেল এবং অনুবাদ রূপান্তর প্রয়োগ করেছি। আমরা ম্যাট্রিক্স() পদ্ধতি ব্যবহার করে এবং পূর্বে উল্লেখিত মানগুলি পাস করে এটি সম্পন্ন করেছি।
উপসংহার
CSS-এ একটি উপাদানে রূপান্তর প্রয়োগ করতে ট্রান্সফর্ম প্রপার্টি ব্যবহার করা হয়। সিএসএস স্ক্যু, স্কেল, ঘোরানো এবং অনুবাদ সহ বেশ কয়েকটি 2D রূপান্তর অফার করে যা ওয়েব উপাদানগুলিকে রূপান্তর করতে ব্যবহৃত হয়।
এই টিউটোরিয়ালটি 2D CSS ট্রান্সফরমেশনের মূল বিষয়গুলি উদাহরণের সাথে অন্বেষণ করেছে। এখন আপনি একজন পেশাদার ওয়েব ডেভেলপারের মতো আপনার নিজস্ব 2D রূপান্তর তৈরি করা শুরু করতে প্রস্তুত৷
৷