সিএসএস 3.0 তে সংযুক্ত কিছু সিএসএস মেথড ব্যাবহার করে কোন এইচটিএমএল এলিমেন্টের ত্রিমাত্রিক অবস্থান তৈরি করা যায়। সিএসএস এ সংযুক্ত এই নতুন প্রোপার্টি গুলো হল - rotateX(), rotateY(), rotateZ(). scaleX(), scaleY() scaleZ() ইত্যাদি।
কোন এইচটিএমএল এলিমেন্টেকে নির্দিষ্ট কোনে বা ডিগ্রীতে তার আনুভূমিক বা horizontal অর্থাৎ X-অক্ষের চারপাশে ঘুরানোর জন্য সিএসএস 3.0 এর rotateX() মেথড ব্যাবহার করা হয়। নিচে rotateX() মেথড ব্যাবহার করে একটি ব্যাবহারিক উদাহরন দেখুন।
নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন,যেখানে rotateX() মেথড ব্যাবহার করা হয়েছে।
div { -webkit-transform: rotateX(150deg); /* for Safari */ transform: rotateX(150deg); }
কোন এইচটিএমএল এলিমেন্টেকে নির্দিষ্ট কোণ বা ডিগ্রী অনুসারে তার উলম্ব বা vertical অর্থাৎ Y-অক্ষের চারপাশে ঘুরানোর জন্য সিএসএস 3.0 এর rotateY() মেথড ব্যাবহার করা হয়।
নিচের উদাহরণে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে rotateY() মেথড ব্যাবহার করা হয়েছে।
div { -webkit-transform: rotateY(130deg); /* for Safari */ transform: rotateY(130deg); }
কোন এইচটিএমএল এলিমেন্টেকে প্রদত্ত নির্দিষ্ট কোনে বা ডিগ্রীতে তার Z-অক্ষের চারপাশে ঘুরানোর জন্ন সিএসএস 3.0 এর rotateZ() মেথড ব্যাবহার করা হয়।
নিচের উদাহরনে কিছু সিএসএস স্টাইল কোড দেখুন, যেখানে rotateZ() মেথড ব্যাবহার করা হয়েছে।
div { -webkit-transform: rotateZ(90deg); /* for Safari */ transform: rotateZ(90deg); }
প্রপার্টি | বর্ণনা |
---|---|
transform | এটি ব্যবহার করে আপনি একটি এলিমেন্টে 2D অথবা 3D ট্রান্সফর্মেশন প্রয়োগ করতে পারবেন। |
transform-origin | এটি ব্যবহার করে আপনি ট্রান্সফর্মেশন-এলিমেন্টের অবস্থানের পরিবর্তন ঘটাতে পারবেন। |
transform-style | একটি এলিমেন্ট 2D কিনা 3D ট্রান্সফর্মেশন হবে তা নির্ধারণ করে। |
perspective | একটি ট্রান্সফর্ম এলিমেন্টের perspective view নির্ধারণ করে। |
perspective-origin | একজন ভিউয়ার 3D এলিমেন্টের যে অংশটি দেখবে তার(এলিমেন্টের পেছনের অংশের) অবস্থান নির্ধারণ করে। |
backface-visibility | 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- |