৩D ট্রান্সফর্ম ব্যবহার করে এলিমেন্টকে X, Y, Z তিনটি অক্ষ অনুযায়ী সরানো, ঘুরানো, এবং স্কেল করা যায়।
প্রধান ৩D ট্রান্সফর্ম ফাংশন
| ক্রম | ফাংশন ও বর্ণনা |
|---|---|
| ১ | matrix3d(n,n,...) — ১৬ মান দিয়ে ৩D ম্যাট্রিক্স |
| ২ | translate3d(x,y,z) — X, Y, Z তিন অক্ষে সরানো |
| ৩ | translateX(x) — X অক্ষে সরানো |
| ৪ | translateY(y) — Y অক্ষে সরানো |
| ৫ | translateZ(z) — Z অক্ষে সরানো |
উদাহরণ: ৩D ট্রান্সফর্ম
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.container { display: inline-block; width: 200px; height: 200px; border: 1px solid #CCC; margin-left: 20px; }
.rotateX { width: 100%; height: 100%; background: rgb(52, 0, 241); transform: perspective(600px) rotateX(85deg); }
.rotateY { width: 100%; height: 100%; background: rgb(55, 0, 255); transform: perspective(600px) rotateY(75deg); }
.translateZ { width: 100%; height: 100%; background: rgb(55, 0, 255); transform: perspective(600px) translateZ(-200px); }
</style>
</head>
<body>
<h1>৩D ট্রান্সফর্ম ফাংশন উদাহরণ</h1>
<div class="container"><div class="rotateX"></div></div>
<div class="container"><div class="rotateY"></div></div>
<div class="container"><div class="translateZ"></div></div>
</body>
</html>
কোড ব্যাখ্যা
- perspective(600px): ৩D গভীরতা দেয়, ছোট মান = ড্রামাটিক ইফেক্ট।
- rotateX(85deg): X-অক্ষ ঘুরিয়ে (সামনে থেকে দেখলে প্রstván হয়)।
- rotateY(75deg): Y-অক্ষ ঘুরিয়ে (পাশ থেকে দেখলে প্রস্থ হয়)।
- translateZ(-200px): Z-অক্ষে ২০০px পেছনে সরায় (দূরে যাবে)।
transform-style: preserve-3d
নেস্টেড ৩D ট্রান্সফর্মের জন্য প্যারেন্টে এটি দরকার।
