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


সিএসএস 3.0 তে সংযুক্ত কিছু সিএসএস মেথড ব্যাবহার করে কোন এইচটিএমএল এলিমেন্টের ত্রিমাত্রিক অবস্থান তৈরি করা যায়। সিএসএস এ সংযুক্ত এই নতুন প্রোপার্টি গুলো হল - rotateX(), rotateY(), rotateZ(). scaleX(), scaleY() scaleZ() ইত্যাদি।


rotateX() মেথড

কোন এইচটিএমএল এলিমেন্টেকে নির্দিষ্ট কোনে বা ডিগ্রীতে তার আনুভূমিক বা horizontal অর্থাৎ X-অক্ষের চারপাশে ঘুরানোর জন্য সিএসএস 3.0 এর rotateX() মেথড ব্যাবহার করা হয়। নিচে rotateX() মেথড ব্যাবহার করে একটি ব্যাবহারিক উদাহরন দেখুন।

Example of CSS rotetX Method

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন,যেখানে rotateX() মেথড ব্যাবহার করা হয়েছে।

উদাহরণ

div {
   -webkit-transform: rotateX(150deg); /* for Safari */
   transform: rotateX(150deg);
   }

কোড এডিটর



rotateY() মেথড

কোন এইচটিএমএল এলিমেন্টেকে নির্দিষ্ট কোণ বা ডিগ্রী অনুসারে তার উলম্ব বা vertical অর্থাৎ Y-অক্ষের চারপাশে ঘুরানোর জন্য সিএসএস 3.0 এর rotateY() মেথড ব্যাবহার করা হয়।

Example of CSS rotetY Method

নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে rotateY() মেথড ব্যাবহার করা হয়েছে।

উদাহরণ

div {
   -webkit-transform: rotateY(130deg); /* for Safari */
   transform: rotateY(130deg);
   }

কোড এডিটর



rotateZ() মেথড

কোন এইচটিএমএল এলিমেন্টেকে প্রদত্ত নির্দিষ্ট কোনে বা ডিগ্রীতে তার Z-অক্ষের চারপাশে ঘুরানোর জন্ন সিএসএস 3.0 এর rotateZ() মেথড ব্যাবহার করা হয়।

নিচের উদাহরনে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে rotateZ() মেথড ব্যাবহার করা হয়েছে।

উদাহরণ

div {
   -webkit-transform: rotateZ(90deg); /* for Safari */
   transform: rotateZ(90deg);
   }

কোড এডিটর



সকল 3D ট্রান্সফর্ম প্রোপার্টি

প্রপার্টি বর্ণনা
transformএটি ব্যবহার করে আপনি একটি এলিমেন্টে 2D অথবা 3D ট্রান্সফর্মেশন প্রয়োগ করতে পারবেন।
transform-originএটি ব্যবহার করে আপনি ট্রান্সফর্মেশন-এলিমেন্টের অবস্থানের পরিবর্তন ঘটাতে পারবেন।
transform-styleএকটি এলিমেন্ট 2D কিনা 3D ট্রান্সফর্মেশন হবে তা নির্ধারণ করে।
perspectiveএকটি ট্রান্সফর্ম এলিমেন্টের perspective view নির্ধারণ করে।
perspective-originএকজন ভিউয়ার 3D এলিমেন্টের যে অংশটি দেখবে তার(এলিমেন্টের পেছনের অংশের) অবস্থান নির্ধারণ করে।
backface-visibility3D এলিমেন্টের পিছনের অংশ দৃশ্যমান হবে কিনা তা নির্ধারণ করে।

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

প্রপার্টি বর্ণনা
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)৪x৪ ম্যাট্রিক্স এর ১৬টি ভ্যালু ব্যবহার করে 3D ট্রান্সফর্মেশন প্রয়োগ করে।
translate3d(x,y,z)3D ট্রান্সফর্মেশন এর মাধ্যমে একটি এলিমেন্টের অবস্থান ত্রিমাত্রিকভাবে পরিবর্তন করে
translateX(x)3D ট্রান্সফর্মেশন এর মাধ্যমে শুধুমাত্র X-অক্ষের সাপেক্ষে একটি এলিমেন্টের অবস্থান পরিবর্তন করে।
translateY(y)3D ট্রান্সফর্মেশন এর মাধ্যমে শুধুমাত্র Y-অক্ষের সাপেক্ষে একটি এলিমেন্টের অবস্থান পরিবর্তন করে।
translateZ(z)3D ট্রান্সফর্মেশন এর মাধ্যমে শুধুমাত্র Y-অক্ষের সাপেক্ষে একটি এলিমেন্টের অবস্থান পরিবর্তন করে।
scale3d(x,y,z)3D ট্রান্সফর্মেশন এর মাধ্যমে একটি এলিমেন্টের আকার ত্রিমাত্রিকভাবে পরিবর্তন করে।
scaleX(x)3D ট্রান্সফর্মেশন এর মাধ্যমে শুধুমাত্র X-অক্ষ বরাবর একটি এলিমেন্টের আকার পরিবর্তন করে।
scaleY(y)3D ট্রান্সফর্মেশন এর মাধ্যমে শুধুমাত্র Y-অক্ষ বরাবর একটি এলিমেন্টের আকার পরিবর্তন করে।
scaleZ(z)3D ট্রান্সফর্মেশন এর মাধ্যমে শুধুমাত্র Z-অক্ষ বরাবর একটি এলিমেন্টের আকার পরিবর্তন করে।
rotate3d(x,y,z,angle)একটি এলিমেন্টের 3D ঘুর্ণন ঘটায়।
rotateX(angle)X-অক্ষের সাপেক্ষে 3D ঘুর্ণন ঘটায়।
rotateY(angle)Y-অক্ষের সাপেক্ষে 3D ঘুর্ণন ঘটায়।
rotateZ(angle)Z-অক্ষের সাপেক্ষে 3D ঘুর্ণন ঘটায়।
perspective(n)3D transformed এলিমেন্টের জন্য perspective view নির্ধারণ করে।

ব্রাউজার সমর্থন

নিচের টেবিলে দেয়া রো গুলোর প্রথম লাইন ব্রাউজারের সেই প্রথম সংস্করণ বা version নির্দেশ করে যেগুলো পুরোপুরি এই প্রপার্টি সমর্থন বা support করে। এছাড়াও এর পরের লাইন -webkit-, -moz- বা -o- যুক্ত সংস্করণ বা version গুলো নির্দেশ করে ব্রাউজারের ঐ প্রথম সংস্করণ বা version যেগুলো কোন প্রিফিক্স ব্যবহার করে প্রদর্শিত হতে পারে।

প্রপার্টি
transform 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit-
11.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-
perspective 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
9.0
4.0 -webkit-
23.0
15.0 -webkit-