সিএসএস ৩ 3D ট্রান্সফর্মস (CSS3 3D Transforms in Bangla)

সিএসএস-থ্রি'তে থ্রিডি ট্রান্সফর্ম ব্যবহার করে পেজের এলিমেন্টগুলোকে ফর্মেট এবং স্টাইল করা যায়। এই অধ্যায়ে আমরা কিছু থ্রিডি ট্রান্সফর্ম এর পদ্ধতি সম্পর্কে জানবোঃ

• 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);
}

সিএসএস-থ্রি ট্রান্সফর্ম প্রপার্টিসমূহ

নিচের টেবলে সবগুলো ট্রান্সফর্ম প্রপার্টির নামসহ ব্যাখ্যা দেয়া হলোঃ

থ্রিডি ট্রান্সফর্ম এর মেথডগুলো