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



সিএসএস ৩ এর 3D ট্রান্সফর্মেশন এর মাধ্যমে কোন একটি এলিমেন্টেকে ত্রিমাত্রিকভাবে পরিবর্তন করা যায়। সিএসএস ৩ এর 3D ট্রান্সফর্মেশন মেথদ গুলো হল - rotateX(), rotateY() ও rotateZ().


rotateX() মেথড

rotetX Method

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

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

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




rotateY() মেথড

rotetY Method

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

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

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




rotateZ() মেথড

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

নিচে একটি উদাহরণ দেখুন।

উদাহরণ

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 নির্ধারণ করে।


ব্রাউজার সাপোর্ট

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

প্রপার্টি
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-







এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.