3d রূপান্তর ব্যবহার করে, আমরা উপাদানকে x-অক্ষ, y-অক্ষ এবং z-অক্ষে স্থানান্তর করতে পারি। CSS3 3D ট্রান্সফর্ম -
এর কিছু পদ্ধতি নিচে দেওয়া হল3D রূপান্তর -
কল করার জন্য নীচের পদ্ধতিগুলি ব্যবহার করা হয়| Sr.No. | মান ও বর্ণনা |
|---|---|
| 1 | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ম্যাট্রিক্সের 16টি মান ব্যবহার করে উপাদানটিকে রূপান্তর করতে ব্যবহৃত হয় |
| 2 | translate3d(x,y,z) x-অক্ষ, y-অক্ষ এবং z-অক্ষ ব্যবহার করে উপাদানটিকে রূপান্তর করতে ব্যবহৃত হয় |
| 3 | translateX(x) x-অক্ষ ব্যবহার করে উপাদানকে রূপান্তর করতে ব্যবহৃত হয় |
| 4 | অনুবাদY(y) y-অক্ষ ব্যবহার করে উপাদানকে রূপান্তর করতে ব্যবহৃত হয় |
| 5 | অনুবাদ Z(z) y-অক্ষ ব্যবহার করে উপাদানকে রূপান্তর করতে ব্যবহৃত হয় |
CSS3 3D ট্রান্সফর্ম ফাংশন -
-এর কোড নিচে দেওয়া হলউদাহরণ
<!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>3D transform function example</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> আউটপুট
উপরের কোডটি নিম্নলিখিত আউটপুট −
তৈরি করবে
