সিএসএস(৩) 2D ট্রান্সফর্ম

এই অধ্যায়ে আপনি 2D transform এর মাধ্যমে একটি এইচটিএমএল এলিমেন্ট এর অবস্থান পরিবর্তন করা শিখবেন।

সিএসএস(৩) transform এর বিভিন্ন মেথড যেমন- translate(), scale(), rotate(), skew() ইত্যাদি ব্যবহার করে আপনি একটি এলিমেন্টের উপর বিভিন্ন প্রভাব(effect) ফেলতে পারেন।

সুতরাং ট্রান্সফর্মেশন এর মাধ্যমে আপনি একটি এলিমেন্টের আকার, আকৃতি, দিক এবং অবস্থান পরিবর্তন করতে পারবেন।

এক নজরে সিএসএস(৩) ট্রান্সফর্ম প্রোপার্টিসমূহ

transform

এটি ব্যবহার করে আপনি একটি এলিমেন্টে 2D অথবা 3D ট্রান্সফর্মেশন প্রয়োগ করতে পারবেন।

transform-origin

এটি ব্যবহার করে আপনি ট্রান্সফর্মেশন-এলিমেন্টের অবস্থানের পরিবর্তন ঘটাতে পারবেন।

এক নজরে সিএসএস(৩) 2D ট্রান্সফর্ম মেথডসমূহ

translate()

2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের অবস্থান পরিবর্তন করতে পারে।

rotate()

2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টকে ঘড়ির কাটার দিকে বা বিপরীত দিকে ঘুরাতে পারে।

scale()

2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করতে পারে।

skew()

2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের আকৃতি তির্যকভাবে পরিবর্তন করতে পারে।

matrix()

সবগুলো 2D ট্রান্সফর্মেশন মেথড একত্রে ব্যবহার করার সংক্ষিপ্ত রূপ।

translate() মেথড

translate() মেথড একটি এলিমেন্টের বর্তমান অবস্থান পরিবর্তন করতে পারে। আমরা translate() মেথডে দুটি প্যারামিটার ব্যবহার করতে পারি। যেখানে প্রথম প্যারামিটার দ্বারা X-অক্ষ এবং দ্বিতীয় প্যারামিটার দ্বারা Y-অক্ষ নির্দেশ করে।

নিম্নের উদাহরণে আমরা <div> এলিমেন্টটিকে বর্তমান অবস্থান থেকে ডানে ৩০ পিক্সেল এবং নিচে ৩০ পিক্সেল সরাবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>সিএসএস translate() মেথড এর উদাহরণ</title>
<style>
	div {
		width: 90%;
		height: auto;
		background-color: orange;
	  	-ms-transform: translate(30px,30px); /* ইন্টারনেট এক্সপ্লোরার ৯ এর জন্য */
		-webkit-transform: translate(30px,30px); /* সাফারি ব্রাউজারের জন্য */
		transform: translate(30px,30px); /* স্ট্যান্ডার্ড সিন্ট্যাক্স */
	}
</style>
</head>
<body>
	<div>translate() মেথড একটি এলিমেন্টের বর্তমান পজিশন পরিবর্তন করে।
	এই div এলিমেন্টটি বর্তমান পজিশন থেকে ডান দিকে 30 পিক্সেল এবং নিচে 30 পিক্সেল সরে গেছে।</div>
</body>
</html>

ফলাফল

সিএসএস(৩) translate মেথডসমূহঃ

মেথড	বর্ণনা
`translate(x,y)`	একটি এলিমেন্ট X এবং Y-অক্ষের সাপেক্ষে তার নিজের অবস্থান পরিবর্তন করে।
`translateX(n)`	একটি এলিমেন্ট শুধুমাত্র X-অক্ষের সাপেক্ষে তার নিজের অবস্থান পরিবর্তন করে।
`translateY(n)`	একটি এলিমেন্ট শুধুমাত্র Y-অক্ষের সাপেক্ষে তার নিজের অবস্থান পরিবর্তন করে।

rotate() মেথড

সিএসএস(৩) rotate() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টকে প্রদত্ত ডিগ্রী অনুযায়ী ঘড়ির কাঁটার দিকে অথবা বিপরীত দিকে ঘুরায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>সিএসএস rotate() মেথড এর উদাহরণ</title>
 <style>
	div {
		width: 90%;
		height: auto;
		background-color: orange;
		border: 2px dotted yellow;
	}
	#textbox {
		transform: rotate(15deg);
	}
</style>
</head>
<body>
	<div>এটি একটি স্বাভাবিক div এলিমেন্ট </div>
	<div id="textbox"> rotate() মেথড একটি এলিমেন্টকে ঘড়ির কাঁটার দিকে বা বিপরীত দিকে ঘুরায়।
	এই div এলিমেন্টটি ঘড়ির কাঁটার দিকে ১৫ ডিগ্রি ঘুরে গেছে।</div>
</body>
</html>

ফলাফল

rotate() মেথডে নেগেটিভ ভ্যালু ব্যবহার করলে এটি একটি এলিমেন্টকে ঘড়ির কাটার বিপরীত দিকে ঘুরায়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title> rotate() মেথডে নেগেটিভ ভ্যালুর ব্যবহার</title>
<style>
	div {
		width: 90%;
		height: auto;
		background-color: orange;
		border: 2px dotted yellow;
	}
	#textbox {
		transform: rotate(-15deg);
	}
</style>
</head>
<body>
	<div>এটি একটি স্বাভাবিক div এলিমেন্ট।</div>
	<div id="textbox">এই div এলিমেন্টটি ঘড়ির কাঁটার বিপরীত দিকে ১৫ ডিগ্রি ঘুরে গেছে।</div>
</body>
</html>

ফলাফল

সিএসএস(৩) rotate মেথডঃ

ফাংশন	বর্ণনা
`rotate(angle)`	একটি এলিমেন্ট কত ডিগ্রী ঘুরবে তা angle প্যারামিটারের মাধ্যমে নির্ধারণ করা হয়।

scale() মেথড

সিএসএস(৩) scale() মেথড 2D Transformation এর মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>scale() মেথডের মাধ্যমে 2D Transformation </title>
<style>
	div {
		margin: 100px;
		width: 200px;
		height: auto;
		padding: 5px;
		background-color: orange;
		transform: scale(2,2);
	}
</style>
</head>
<body>
	<div>এই div এলিমেন্টের width এবং height প্রকৃত div এলিমেন্টের দ্বিগুন হয়েছে।</div>
	<p>scale() মেথড একটি এলিমেন্টের আকার(size) বৃদ্ধি অথবা হ্রাস করতে পারে।</p>
</body>
</html>

ফলাফল

সিএসএস(৩) scale মেথডসমূহ

ফাংশন	বর্ণনা
`scale(x,y)`	X এবং Y-অক্ষের সাপেক্ষে একটি এলিমেন্টের প্রস্থ এবং উচ্চতা পরিবর্তন করে।
`scaleX(n)`	X-অক্ষের সাপেক্ষে একটি এলিমেন্টের প্রস্থ(width) পরিবর্তন করে।
`scaleY(n)`	Y-অক্ষের সাপেক্ষে একটি এলিমেন্টের উচ্চতা(height) পরিবর্তন করে।

skew() মেথড

সিএসএস(৩) skew() মেথড প্রদত্ত কোণদ্বয় অনুযায়ী X এবং Y-অক্ষের সাপেক্ষে একটি এলিমেন্টর অবস্থান তির্যকভাবে পরিবর্তন করে।

নিম্নের উদাহরণে আমরা <div> এলিমেন্টের অবস্থান তির্যকভাবে X-অক্ষের সাপেক্ষে ১০ডিগ্রী এবং Y-অক্ষের সাপেক্ষে ১৫ডিগ্রী পরিবর্তন করবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>skew() মেথড</title>
<style>
	div {
		width: 90%;
		height: auto;
		background-color: orange;
	}
	#textbox {
		transform: skew(10deg,15deg);
	}
</style>
</head>
<body>
	<p>skew() মেথড  প্রদত্ত কোণ অনুযায়ী একটি এলিমেন্টকে skew করে।</p>
	<div>স্বাভাবিক div এলিমেন্ট</div>
	<div id="textbox">এই div এলিমেন্টটি X-অক্ষের সাপেক্ষে ১০ডিগ্রি এবং Y-অক্ষের সাপেক্ষে ১৫ডিগ্রি skewed হয়েছে।</div>
</body>
</html>

ফলাফল

skew() মেথডের মধ্যে দুটি প্যারামিটার ব্যবহার করা হয়। যদি কোনো ক্ষেত্রে দ্বিতীয় প্যারামিটারটি উল্লেখ করা না হয় তাহলে এটির ভ্যালু ডিফল্টভাবে শূন্য হয়।

নিম্নের উদাহরণে skew() মেথডে একটি মাত্র প্যারামিটার ব্যবহার করায় <div> এলিমেন্টেটি শুধুমাত্র X-অক্ষের সাপেক্ষে ১৫ডিগ্রী তির্যক ভাবে ঘুরবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>skew() মেথড</title>
<style>
	div {
		width: 90%;
		height: auto;
		background-color: orange;
	}
	div#textbox {
		transform: skew(15deg);
	}
</style>
</head>
<body>
	<p>skew() মেথড প্রদত্ত কোণ অনুযায়ী একটি এলিমেন্টকে skew করে।</p>
	<div>স্বাভাবিক div এলিমেন্ট</div>
	<div id="textbox">এই div এলিমেন্টটি X-অক্ষের সাপেক্ষে ১৫ডিগ্রি skewed হয়েছে।</div>
</body>
</html>

ফলাফল

সিএসএস(৩) skew মেথডসমূহঃ

ফাংশন	বর্ণনা
`skew(x-angle, y-angle)`	প্রদত্ত কোণ অনুযায়ী একটি এলিমেন্ট X-অক্ষ এবং Y-অক্ষ বরাবর তির্যকভাবে ঘুরবে।
`skewX(angle)`	প্রদত্ত কোণ অনুযায়ী একটি এলিমেন্ট X-অক্ষ বরাবর তির্যকভাবে ঘুরবে।
`skewY(angle)`	প্রদত্ত কোণ অনুযায়ী একটি এলিমেন্ট Y-অক্ষ বরাবর তির্যকভাবে ঘুরবে।

skewX(angle) এবং skewY(angle) মেথডদ্বয়ের ব্যবহার দেখার জন্য নিজে নিজে চেষ্টা করূন।

matrix() মেথড

সিএসএস(৩) matrix() মেথড এর মাধ্যমে 2D ট্রান্সফর্মে ব্যবহৃত সবগুলো মেথড একত্রে ব্যবহার করা যায়।

matrix() মেথডে ৬টি প্যারামিটার থাকে। যা একটি এলিমেন্টকে rotate, scale, translate এবং skew করে।

ম্যাট্রিক্স এর গঠনঃ

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>matrix() মেথড এর উদাহরণ</title>
<style>
	div {
		width: 150px;
		height: auto;
		background-color: orange;
	}
	#textbox { 
		transform: matrix(1, -0.3, 0, 1, 0, 0);
	}
	#textbox1 {
		transform: matrix(1, 0, 0.5, 1, 120, 0);
	}
</style>
</head>
<body>

<p>matrix() মেথড 2D transform এর সবগুলো মেথড একত্রে ব্যবহার করে।</p>
<div> স্বাভাবিক div এলিমেন্ট</div>
<div id="textbox">matrix() মেথড ব্যবহারকারী div এলিমেন্ট।</div>
<div id="textbox1">matrix() মেথড ব্যবহারকারী অন্য একটি div এলিমেন্ট।</div>

</body>
</html>

ফলাফল

সিএসএস(৩) matrix মেথডঃ

ফাংশন	বর্ণনা
`matrix(n,n,n,n,n,n)`	ম্যাট্রিক্স মেথড এর ৬টি প্যারামিটার দ্বারা 2D ট্রান্সফর্মেশন এর সবগুলো মেথড ব্যবহার করা যায়।

ব্রাউজার সাপোর্ট

প্রোপার্টি	Google Chrome	Edge/IE	Mozila Firefox	Safari	Opera
transform	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.0 3.5 -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-
`transform-origin` (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	১৬.0 ৩.৫ -moz-	9.0 3.2 -webkit-	23.0 15.0 -webkit- 12.1 10.5 -o-

«পূর্ববর্তী

পরবর্তী»

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল