X

X

X

CSS3 3D Transforms । ত্রিমাত্রিক রূপান্তর


CSS3 3D Transforms (ত্রিমাত্রিক রূপান্তর)

CSS3 তে কোনো ইলামেন্টর স্বাভাবিক অবস্থানকে ত্রিমাত্রিকভাবে পরিবর্তন করা যায়।

নিচের ইলামেন্টগুলোর উপর মাউস হোভার করে দ্বিমাত্রিক ও ত্রিমাত্রিক রূপান্তরের পার্থক্য দেখুন:

2D rotate
3D rotate

3D Transform এর জন্য Browser Support

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

CSS3 ত্রিমাত্রিক রূপান্তরের মেথড সমূহ

এই অধ্যায়ে ত্রিমাত্রিক রূপান্তর মেথডসমূহ সম্পর্কে আলোচনা করা হবে:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() Method

Rotate X

প্রদত্ত কৌণিক মানের উপর ভিত্তি করে rotateX() method ব্যবহার করে কোনো ইলামেন্টকে X অক্ষের সাপেক্ষে এটিকে ঘুরানো যায়:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

#myDiv {
    -webkit-transform: rotateX(150deg); /* Safari */
    transform: rotateX(150deg); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


rotateY() Method

Rotate Y

প্রদত্ত কৌণিক মানের উপর ভিত্তি করে rotateY() method ব্যবহার করে কোনো ইলামেন্টকে Y অক্ষের সাপেক্ষে এটিকে ঘুরানো যায়:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

#myDiv {
    -webkit-transform: rotateY(150deg); /* Safari */
    transform: rotateY(150deg); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


rotateZ() Method

প্রদত্ত কৌণিক মানের উপর ভিত্তি করে rotateZ() method ব্যবহার করে কোনো ইলামেন্টকে Z অক্ষের সাপেক্ষে এটিকে ঘুরানো যায়:

Code Example

div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}

#myDiv {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg); /* Standard syntax */
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চর্চা করুন!

Exercise 1 »  Exercise 2 »  Exercise 3 »


CSS3 Transform Property সমূহ

নিচের টেবিলে সব ত্রিমাত্রিক ট্রান্সফর্ম প্রপার্টিসমূহ উল্লেখ্য করা হলো:

প্রপার্টি বর্ণনা
transform কোনো ইলামেন্ট দ্বিমাত্রিক বা ত্রিমাত্রিক ট্রান্সফরম প্রয়োগ করার জন্য ব্যবহৃত হয়।
transform-origin কোনো transformed element এর অবস্থান পরিবর্তন করার জন্য ব্যবহৃত হয়।
transform-style nested element সমূহ কোনো ত্রিমাত্রিক এরিয়ার মধ্যে কিভাবে উপস্থাপতি হবে তা বর্ণনা করার জন্য ব্যবহৃত হয়।
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin ত্রিমাত্রিক ইলামেন্টের নিচের অবস্থান নির্ধারণ করার জন্য ব্যবহৃত হয়।
backface-visibility যখন কোনো স্ক্রিন দেখা হবে না , তখন ইলামেন্টটি প্রদর্শিত হবে কি হবে না তা বর্ণনা করার জন্য ব্যবহৃত হয়।

3D Transform Method সমূহ

ফাংশন বর্ণনা
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
4×4 matrix দিয়ে ত্রিমাত্রিক ট্রান্সফরমেশন বর্ণনা করার জন্য ব্যবহৃত হয়।
translate3d(x,y,z) ত্রিমাত্রিক রূপান্তর বর্ণনা করার জন্য ব্যবহৃত হয়।
translateX(x) X-axis বরাবর ত্রিমাত্রিক রূপান্তর বর্ণনা করার জন্য ব্যবহৃত হয়।
translateY(y) Y-axis বরাবর ত্রিমাত্রিক রূপান্তর বর্ণনা করার জন্য ব্যবহৃত হয়।
translateZ(z) Z-axis বরাবর ত্রিমাত্রিক রূপান্তর বর্ণনা করার জন্য ব্যবহৃত হয়।
scale3d(x,y,z) ত্রিমাত্রিক scale transformation বর্ণনা করার জন্য ব্যবহৃত হয়।
scaleX(x) X-axis বরাবর ত্রিমাত্রিক scale transformation বর্ণনা করার জন্য ব্যবহৃত হয়।
scaleY(y) Y-axis বরাবর ত্রিমাত্রিক scale transformation বর্ণনা করার জন্য ব্যবহৃত হয়।
scaleZ(z) Z-axis বরাবর ত্রিমাত্রিক scale transformation বর্ণনা করার জন্য ব্যবহৃত হয়।
rotate3d(x,y,z,angle) 3D rotation বর্ণনা করার জন্য ব্যবহৃত হয়।
rotateX(angle) X-axis বরাবর 3D rotation বর্ণনা করার জন্য ব্যবহৃত হয়।
rotateY(angle) Y-axis বরাবর 3D rotation বর্ণনা করার জন্য ব্যবহৃত হয়।
rotateZ(angle) Z-axis বরাবর 3D rotation বর্ণনা করার জন্য ব্যবহৃত হয়।
perspective(n) 3D transformed element এর পার্সপেক্টিভ ভিউ বর্ণনা করার জন্য ব্যবহৃত হয়।