সিএসএস৩ দ্বিমাত্রিক ট্রান্সফর্ম - Css3 2D Transform


সিএসএস 3.0 তে সংযুক্ত কিছু সিএসএস মেথড ব্যাবহার করে কোন এইচটিএমএল এলিমেন্টের অবস্থান অর্থাৎ আকার, আকৃতি, দিক, অবস্থান ইত্যাদি পরিবর্তন করা যায়। এই নতুন সংযুক্ত প্রোপার্টি গুলো হল translate(), scale(), rotate(), skew() ইত্যাদি


translate() মেথড

Example of CSS Translate Method

কোন এইচটিএমএল এলিমেন্টের অবস্থান পরিবর্তন করার জন্য সিএসএস এর 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);
   }

কোড এডিটর



rotate() মেথড

Example of CSS Rotate Method

কোন এইচটিএমএল এলিমেন্টকে নির্ধারিত কোণ অনুসারে ঘড়ির কাঁটার দিকে অথবা ঘড়ির কাঁটার বিপরীত দিকে ঘুরানোর জন্য সিএসএস 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);
   }

কোড এডিটর



scale() মেথড

Example of CSS Scale Method

কোন এইচটিএমএল এলিমেন্টের আকার বা 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);
   }

কোড এডিটর



skewX() মেথড

Example of CSS skewX Method

কোন এইচটিএমএল এলিমেন্টকে আনুভূমিক বা 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);
   }

কোড এডিটর



skewY() মেথড

Example of CSS skewY Method

কোন এইচটিএমএল এলিমেন্টকে উলম্ব বা 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);
   }

কোড এডিটর



skew() মেথড

কোন এইচটিএমএল এলিমেন্টকে আনুভূমিক বা 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() মেথড

Example of CSS Matrix Method

সিএসএস এর matrix() মেথড হল সকল দ্বিমাত্রিক ট্রান্সফর্ম বা 2D Transform মেথড গুলোর শর্টহ্যান্ড প্রোপার্টি। দ্বিমাত্রিক ট্রান্সফর্ম বা 2D Transform এর সকল মেথড গুলো অর্থাৎ scaleX, skewY, skewX, scaleY, translateXtranslateY মেথড গুলোর কাজ, 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এটি ব্যবহার করে আপনি ট্রান্সফর্মেশন-এলিমেন্টের অবস্থানের পরিবর্তন ঘটাতে পারবেন।

সকল 2D ট্রান্সফর্ম মেথড

প্রপার্টি বর্ণনা
translate()2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের অবস্থান পরিবর্তন করতে পারে।
rotate()2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টকে ঘড়ির কাটার দিকে বা বিপরীত দিকে ঘুরাতে পারে।
scale()2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের আকার বৃদ্ধি অথবা হ্রাস করতে পারে।
skew()2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের আকৃতি তির্যকভাবে পরিবর্তন করতে পারে।
matrix()সবগুলো 2D ট্রান্সফর্মেশন মেথড একত্রে ব্যবহার করার সংক্ষিপ্ত রূপ।