সিএসএস 3.0 তে সংযুক্ত কিছু সিএসএস মেথড ব্যাবহার করে কোন এইচটিএমএল এলিমেন্টের অবস্থান অর্থাৎ আকার, আকৃতি, দিক, অবস্থান ইত্যাদি পরিবর্তন করা যায়। এই নতুন সংযুক্ত প্রোপার্টি গুলো হল translate(), scale(), rotate(), skew() ইত্যাদি
কোন এইচটিএমএল এলিমেন্টের অবস্থান পরিবর্তন করার জন্য সিএসএস এর translate() মেথড ব্যাবহার করা হয়। এ মেথডে 2টি মান বা value অর্থাৎ parameter নির্ধারণ করা যায়, যার প্রথমটি দ্বারা আনুভূমিক বা horizontal অর্থাৎ X-অক্ষ এবং দ্বিতীয়টি দ্বারা উলম্ব বা vertical অর্থাৎ Y-অক্ষ নির্ধারণ করা হয়।
নিচে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে একটি div এলিমেন্টকে বর্তমান অবস্থান থেকে ডানে 50px এবং নিচে 50px সরানো হয়েছে।
div { -ms-transform: translate(50px, 50px); /* for IE 9 */ -webkit-transform: translate(50px, 50px); /* for Safari */ transform: translate(50px, 50px); }
কোন এইচটিএমএল এলিমেন্টকে নির্ধারিত কোণ অনুসারে ঘড়ির কাঁটার দিকে অথবা ঘড়ির কাঁটার বিপরীত দিকে ঘুরানোর জন্য সিএসএস 3.0 এর rotate() মেথড ব্যবহার করা হয় ।
নিচে কিছু সিএসএস কোড দেখুন যেখানে একটি এইচটিএমএল div এলিমেন্টকে বর্তমান অবস্থান থেকে ঘড়ির কাঁটার দিকে ডানে 25 ডিগ্রি কোণে সরানো হয়েছে।
div { -ms-transform: rotate(25deg); /* for IE 9 */ -webkit-transform: rotate(25deg); /* for Safari */ transform: rotate(25deg); }
rotate() মেথড ব্যাবহার করে কোন এইচটিএমএল এলিমেন্টকে বা দিকে অর্থাৎ ঘড়ির কাটার বিপরীত দিকে ঘুরানোর জন্য ঋণাত্মক বা negetive মান বা value ব্যবহার করতে হয়।
নিচে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে একটি div এলিমেন্টকে বর্তমান অবস্থান থেকে ঘড়ির কাটার বিপরীত দিকে অর্থাৎ বা দিকে 25 ডিগ্রি কোণে সরানো হয়েছে।
div { -ms-transform: rotate(-25deg); /* for IE 9 */ -webkit-transform: rotate(-25deg); /* for Safari */ transform: rotate(-25deg); }
কোন এইচটিএমএল এলিমেন্টের আকার বা size হ্রাস বা বৃদ্ধি করার জন্য সিএসএস 3.0 এর scale() মেথড ব্যবহার করা হয়।
নিচে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে একটি div এলিমেন্টকে বর্তমান আকৃতি থেকে দৈর্ঘ্যে 2 গুন এবং প্রস্থে 3 গুন বৃদ্ধি করা হয়েছে।
div { -ms-transform: scale(2, 3); /* for IE 9 */ -webkit-transform: scale(2, 3); /* for Safari */ transform: scale(2, 3); }
নিচে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে একটি div এলিমেন্টকে তার বর্তমান আকৃতি থেকে দৈর্ঘ্যে ও প্রস্থে অর্ধেক হ্রাস করা বা কমানো হয়েছে।
div { -ms-transform: scale(0.5, 0.5); /* for IE 9 */ -webkit-transform: scale(0.5, 0.5); /* for Safari */ transform: scale(0.5, 0.5); }
কোন এইচটিএমএল এলিমেন্টকে আনুভূমিক বা horizontal অর্থাৎ X-অক্ষের সাপেক্ষে নির্দিষ্ট কোন কৌণিক অবস্থানে অর্থাৎ তির্যকভাবে স্থাপন করার জন্য সিএসএস 3.0 এর skewX() মেথড ব্যাবহার করা হয়।
নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে একটি div এলিমেন্টের অবস্থান তির্যকভাবে X-অক্ষের সাপেক্ষে 20 ডিগ্রী পরিবর্তন করা হয়েছে।
div { -ms-transform: skewX(20deg); /* for IE 9 */ -webkit-transform: skewX(20deg); /* for Safari */ transform: skewX(20deg); }
কোন এইচটিএমএল এলিমেন্টকে উলম্ব বা vertical অর্থাৎ Y-অক্ষের সাপেক্ষে নির্দিষ্ট কোন কৌণিক অবস্থানে অর্থাৎ তির্যকভাবে স্থাপন করার জন্য সিএসএস 3.0 এর skewY() মেথড ব্যাবহার করা হয়।
নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে একটি div এলিমেন্টের অবস্থান তির্যকভাবে Y-অক্ষের সাপেক্ষে 20 ডিগ্রী পরিবর্তন করা হয়েছে।
div { -ms-transform: skewY(20deg); /* for IE 9 */ -webkit-transform: skewY(20deg); /* for Safari */ transform: skewY(20deg); }
কোন এইচটিএমএল এলিমেন্টকে আনুভূমিক বা horizontal অর্থাৎ X-অক্ষ এবং উলম্ব বা vertical অর্থাৎ Y-অক্ষের সাপেক্ষে নির্দিষ্ট কোনে অবস্থান অর্থাৎ তির্যকভাবে স্থাপন করার জন্য সিএসএস 3.0 এর skew() মেথড ব্যাবহার করা হয়।
নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে একটি div এলিমেন্টের অবস্থান তির্যকভাবে X-অক্ষের সাপেক্ষে 15 ডিগ্রী এবং Y-অক্ষের সাপেক্ষে 20 ডিগ্রী পরিবর্তন করা হয়েছে।
div { -ms-transform: skew(15deg, 20deg); /* for IE 9 */ -webkit-transform: skew(15deg, 20deg); /* for Safari */ transform: skew(15deg, 20deg); }
নোট - সিএসএস এর skew() মেথডে দুটি মান বা value ব্যবহার করা হয়। কিন্তু যদি দ্বিতীয় মান বা value টি উল্লেখ করা না হয় তবে, এটির মান বা value পূর্ব-নির্ধারিত বা default ভাবে 0 হয়।
নিচের উদাহরনে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে skew() মেথডে একটি মাত্র প্যারামিটার নির্দিষ্ট করা হয়েছে, ফলে এইচটিএমএল div এলিমেন্টটি শুধুমাত্র আনুভূমিক বা horizontal অর্থাৎ X-অক্ষের সাপেক্ষেই অবস্থান পরিবর্তন করেছে।
div { -ms-transform: skew(20deg); /* for IE 9 */ -webkit-transform: skew(20deg); /* for Safari */ transform: skew(20deg); }
সিএসএস এর matrix() মেথড হল সকল দ্বিমাত্রিক ট্রান্সফর্ম বা 2D Transform মেথড গুলোর শর্টহ্যান্ড প্রোপার্টি। দ্বিমাত্রিক ট্রান্সফর্ম বা 2D Transform এর সকল মেথড গুলো অর্থাৎ scaleX, skewY, skewX, scaleY, translateX ও translateY মেথড গুলোর কাজ, matrix() মেথড ব্যাবহার করে করা যায়।
matrix() মেথডে ৬টি parameter নির্ধারণ করা যায়, যা কোন এইচটিএমএল এলিমেন্টকে rotate, scale, translate এবং skew করতে পারে। matrix() মেথডের ৬টি parameter হল - scaleX, skewY, skewX, scaleY, translateX এবং translateY.
নিচে সিএসএস এর matrix() মেথডের সিনট্যাক্স দেখুন।
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
নিচে সিএসএস এর matrix() মেথড ব্যাবহার করে কিছু স্টাইল কোড দেখুন।
div { -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* for IE 9 */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* for Safari */ transform: matrix(1, -0.3, 0, 1, 0, 0); }
নিচের টেবিলে দেয়া রো গুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন বা support করে। এছাড়াও এর পরের লাইন -webkit-, -moz- বা -o- যুক্ত সংস্করণ বা version গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম সংস্করণ বা version যেগুলো কোন প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।
প্রপার্টি | |||||
---|---|---|---|---|---|
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- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 12.1 10.5 -o- |
প্রপার্টি | বর্ণনা |
---|---|
transform | এটি ব্যবহার করে আপনি একটি এলিমেন্টে 2D অথবা 3D ট্রান্সফর্মেশন প্রয়োগ করতে পারবেন। |
transform-origin | এটি ব্যবহার করে আপনি ট্রান্সফর্মেশন-এলিমেন্টের অবস্থানের পরিবর্তন ঘটাতে পারবেন। |
প্রপার্টি | বর্ণনা |
---|---|
translate() | 2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের অবস্থান পরিবর্তন করতে পারে। |
rotate() | 2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টকে ঘড়ির কাটার দিকে বা বিপরীত দিকে ঘুরাতে পারে। |
scale() | 2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করতে পারে। |
skew() | 2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের আকৃতি তির্যকভাবে পরিবর্তন করতে পারে। |
matrix() | সবগুলো 2D ট্রান্সফর্মেশন মেথড একত্রে ব্যবহার করার সংক্ষিপ্ত রূপ। |