সিএসএস(৩) 3D ট্রান্সফর্ম
সিএসএস(৩) 3D ট্রান্সফর্মেশন এর মাধ্যমে একটি এলিমেন্টেকে ত্রিমাত্রিকভাবে পরিবর্তন করা যায়।
এক নজরে সিএসএস 3D ট্রান্সফর্ম প্রোপার্টিসমূহ
এটি ব্যবহার করে আপনি একটি এলিমেন্টে 2D অথবা 3D ট্রান্সফর্মেশন প্রয়োগ করতে পারবেন।
এটি ব্যবহার করে আপনি ট্রান্সফর্মেশন-এলিমেন্টের অবস্থানের পরিবর্তন ঘটাতে পারবেন।
একটি এলিমেন্ট 2D কিনা 3D ট্রান্সফর্মেশন হবে তা নির্ধারণ করে।
একটি ট্রান্সফর্ম এলিমেন্টের perspective view নির্ধারণ করে।
একজন ভিউয়ার 3D এলিমেন্টের যে অংশটি দেখবে তার(এলিমেন্টের পেছনের অংশের) অবস্থান নির্ধারণ করে।
3D এলিমেন্টের পিছনের অংশ দৃশ্যমান হবে কিনা তা নির্ধারণ করে।
সিএসএস(৩) 3D ট্রান্সফর্ম
এই অধ্যায়ে আপনি নিম্নলিখিত 3D ট্রান্সফর্ম মেথড সম্পর্কে জানতে পারবেনঃ
| ফাংশন | বর্ণনা |
|---|---|
rotateX(angle) |
angle প্যারামিটার অনুযায়ী একটি এলিমেন্ট X-অক্ষ বরাবর ঘুরবে। |
rotateY(angle) |
angle প্যারামিটার অনুযায়ী একটি এলিমেন্ট Y-অক্ষ বরাবর ঘুরবে। |
rotateZ(angle) |
angle প্যারামিটার অনুযায়ী একটি এলিমেন্ট Y-অক্ষ বরাবর ঘুরবে। |
rotateX(), rotateY() এবং rotateZ() মেথড
rotateX() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার X-অক্ষের চারপাশে ঘুরাবেঃ
rotateY() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Y-অক্ষের চারপাশে ঘুরাবেঃ
rotateZ() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Z-অক্ষের চারপাশে ঘুরাবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>css 3d transform</title>
<style>
div{
width: 80%;
height: auto;
background-color: orange;
border: 2px dotted red;
}
#three-d-box-x {
transform: rotateX(170deg);
}
#three-d-box-y {
transform: rotateY(170deg);
}
#three-d-box-z {
transform: rotateZ(170deg);
}
</style>
</head>
<body>
<div>এটি একটি স্বাভাবিক div এলিমেন্ট</div>
<h2>rotateX() মেথড এর ব্যবহার।</h2>
<div id="three-d-box-x">এই div এলিমেন্টকে X-অক্ষের সাপেক্ষে 170 ডিগ্রি কোণে ঘুরানো হয়েছে।</div>
<h2>rotateY() মেথড এর ব্যবহার।</h2>
<div id="three-d-box-y">এই div এলিমেন্টকে Y-অক্ষের সাপেক্ষে 170 ডিগ্রি কোণে ঘুরানো হয়েছে।</div>
<h2>rotateZ() মেথড এর ব্যবহার।</h2>
<div id="three-d-box-z">এই div এলিমেন্টকে Z- অক্ষের সাপেক্ষে 170 ডিগ্রি কোণে ঘুরানো হয়েছে।</div>
<p><b>নোট :</b> ইন্টারনেট এক্সপ্লোরার ৯
এবং এর আগের ভার্সনে rotate() মেথড সাপোর্ট করে না।</p>
</body>
</html>
ফলাফল
এক নজরে 3D ট্রান্সফর্ম মেথডসমূহ
| ফাংশন | বর্ণনা |
|---|---|
matrix3d |
৪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 নির্ধারণ করে। |
ব্রাউজার সাপোর্ট
| প্রোপার্টি | Google Chrome | Edge/IE | Mozila Firefox | Safari | Opera |
|---|---|---|---|---|---|
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- |