সিএসএস-থ্রি’তে থ্রিডি ট্রান্সফর্ম ব্যবহার করে পেজের এলিমেন্টগুলোকে ফর্মেট এবং স্টাইল করা যায়। এই অধ্যায়ে আমরা কিছু থ্রিডি ট্রান্সফর্ম এর পদ্ধতি সম্পর্কে জানবোঃ
- rotateX()
- rotateY()
- rotateZ()
একটি টুডি ট্রান্সফর্ম এবং একটি থ্রিডি ট্রান্সফর্ম এর মধ্যে পার্থক্য দেখতে নিচের এলিমেন্টটির উপর ক্লিক করুনঃ
থ্রিডি ট্রান্সফর্ম এর ব্রাউজার সাপোর্ট
টেবলের নম্বরগুলো দিয়ে প্রথম যে ব্রাউজার ভার্শন এই ফিচারটিকে পুরোপুরি সাপোর্ট করে তার তালিকা প্রকাশ করে। -webkit-, -moz-, অথবা -o- এর সাথের নম্বরগুলো প্রথম যে ভার্শনটি প্রিফিক্সসহ কাজ করে তার তালিকা দেয়।
| Property |  |
 |
 |
 |
 |
 |
| transform | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| transform-style | 36.0 12.0 -webkit- |
12.0 | 11.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| perspective-origin | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
| backface-visibility | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
4.0 -webkit- | 23.0 15.0 -webkit- |
rotateX() মেথড
rotateX() মেথডের মাধ্যমে এলিমেনটি একটি নির্দিষ্ট ডিগ্রিতে এর এক্স অক্ষের (X-axis) চারদিকে ঘুরে।
উদাহরণঃ
div {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg);
}
rotateY() মেথড
rotateY() মেথডের মাধ্যমে এলিমেন্টটি একটি নির্দিষ্ট ডিগ্রিতে এর ওয়াই অক্ষের (Y-axis) চারদিকে ঘুরে।
উদাহরণঃ
div {
-webkit-transform: rotateY(130deg); /* Safari */
transform: rotateY(130deg);
}
rotateZ() মেথড
rotateZ() মেথডের মাধ্যমে এলিমেন্টটি একটি নির্দিষ্ট ডিগ্রিতে এর ওয়াই অক্ষের (Z-axis) চারদিকে ঘুরে।
div {
-webkit-transform: rotateZ(90deg); /* Safari */ transform: rotateZ(90deg); }
সিএসএস-থ্রি ট্রান্সফর্ম প্রপার্টিসমূহ
নিচের টেবলে সবগুলো ট্রান্সফর্ম প্রপার্টির নামসহ ব্যাখ্যা দেয়া হলোঃ
|
প্রপার্টি |
ব্যাখ্যা |
| transform | একটি এলিমেন্টে একটি টুডি অথবা থ্রিডি ট্রান্সফর্মেশান যোগ করে |
| transform-origin | আপনাকে ট্রান্সফর্ম হওয়া এলিমেন্টের উপর অবস্থান পরিবর্তন করতে দেয়। |
| transform-style | থ্রিডি স্পেসে কিভাবে নেস্টেড প্রপার্টিগুলো স্টাইল করা হবে তা ঠিক করে। |
| perspective | কোন পার্সপেক্টিভ বা দৃষ্টিকোন থেকে থ্রিডি এলিমেন্টগুলো দেখা হবে তা ঠিক করে। |
| perspective-origin | থ্রিডি এলিমেন্টের বটম পজিশান ঠিক করে। |
| backface-visibility | আমরা যখন স্ক্রিনের দিকে মুখোমুখি থাকিনা তখন কোন এলিমেন্ট দেখা যাবে কি যাবেনা তা নির্দিষ্ট করে |
থ্রিডি ট্রান্সফর্ম এর মেথডগুলো
|
ফাংশন |
ব্যাখ্যা |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 16 ভ্যালুর 4*4 ম্যাট্রিক্স ব্যবহার করে একটি থ্রিডি ট্রান্সফর্মেশান সংজ্ঞায়িত করে |
| translate3d(x,y,z) | একটি থ্রিডি ট্রান্সস্লেশান সংজ্ঞায়িত করে |
| translateX(x) | শুধু এক্স অক্ষের ভ্যালু ব্যবহার করে একটি থ্রিডি ট্রান্সস্লেশান সংজ্ঞায়িত করে |
| translateY(y) | শুধু ওয়াই অক্ষের ভ্যালু ব্যবহার করে একটি থ্রিডি ট্রান্সস্লেশান সংজ্ঞায়িত করে |
| translateZ(z) | শুধু জেড অক্ষের ভ্যালু ব্যবহার করে একটি থ্রিডি ট্রান্সস্লেশান সংজ্ঞায়িত করে |
| scale3d(x,y,z) | একটি থ্রিডি স্কেল ট্রান্সফর্মেশান সংজ্ঞায়িত করে |
| scaleX(x) | এক্স অক্ষের ভ্যালু দিয়ে একটি থ্রিডি স্কেল ট্রান্সফর্মেশান সংজ্ঞায়িত করে |
| scaleY(y) | ওয়াই অক্ষের ভ্যালু দিয়ে একটি থ্রিডি স্কেল ট্রান্সফর্মেশান সংজ্ঞায়িত করে |
| scaleZ(z) | জেড অক্ষের ভ্যালু দিয়ে একটি থ্রিডি স্কেল ট্রান্সফর্মেশান সংজ্ঞায়িত করে |
| rotate3d(x,y,z,angle) | একটি থ্রিডি রোটেশান সংজ্ঞায়িত করে |
| rotateX(angle) | এক্স অক্ষ বরাবর একটি থ্রিডি রোটেশান সংজ্ঞায়িত করে |
| rotateY(angle) | ওয়াই অক্ষ বরাবর একটি থ্রিডি রোটেশান সংজ্ঞায়িত করে |
| rotateZ(angle) | জেড অক্ষ বরাবর একটি থ্রিডি রোটেশান সংজ্ঞায়িত করে |
| perspective(n) | একটি থ্রিডি ট্রান্সফর্ম হওয়া এলিমেন্টের জন্য একটি পার্সপেক্টিভ ভিউ সংজ্ঞায়িত করে |
