Transformهای 3D

از موتو کد، دانشنامهٔ برنامه‌نویسی

تبدیل های سه بعدی در CSS[ویرایش | ویرایش]

CSS همچنین از تبدیل های سه بعدی (3D Transform) نیز پشتیبانی می‌کند.[۱]

نشانه‌گر ماوس را روی عناصر زیر ببرید تا تفاوت تبدیل های دو بعدی و سه بعدی را ببینید:

در این فصل در مورد ویژگی‌های CSS زیر مطالبی را خواهید آموخت:

  • transform

پشتیبانی مرورگرها[ویرایش | ویرایش]

اعداد موجود در جدول زیر شماره اولین نسخه مرورگرهایی است که به‌طور کامل از این ویژگی پشتیبانی می‌کنند.

ویژگی (Property) Chrome Internet Explorer / Edge Firefox Safari Opera
transform ۳۶٫۰ ۱۰٫۰ ۱۶٫۰ ۹٫۰ ۲۳٫۰

متدهای تبدیل سه بعدی در CSS[ویرایش | ویرایش]

با ویژگی transform در CSS شما می‌توانید از متدهای تبدیل سه بعدی زیر استفاده کنید:

rotateX()

rotateY()

rotateZ()

متد rotateX()[ویرایش | ویرایش]

Transform rotatex.gif

متد rotateX() یک عنصر را حول محور X با مقدار زاویه داده شده می‌چرخاند:

مثال
#myDiv {
  transform: rotateX(150deg);
}

متد rotateY()[ویرایش | ویرایش]

Transform rotatey.gif

متد rotateY() یک عنصر را حول محور Y با زاویه داده شده می‌چرخاند:

مثال
#myDiv {
  transform: rotateY(130deg);
}

متد rotateZ()[ویرایش | ویرایش]

متد rotateZ() یک عنصر را حول محور Z با زاویه داده شده می‌چرخاند:

مثال
#myDiv {
  transform: rotateZ(90deg);
}

خود را با تمرین ها امتحان کنید![ویرایش | ویرایش]

ویژگی های Transform در CSS[ویرایش | ویرایش]

جدول زیر تمامی ویژگی‌های 3D Transform را لیست می‌کند.

ویژگی توضیحات
transform یک تبدیل دوبعدی یا سه بعدی برروی یک عنصر اعمال می کند
transform-origin به شما اجازه می‌دهد موقعیت را روی عناصر تبدیل شده را تغییر دهید
transform-style نحوه رندر عناصر تو در تو را در فضای سه بعدی مشخص می‌کند
perspective فضای ۳ بعدی برای نمایش عناصر سه بعدی را مشخص می‌کند
perspective-origin موقعیت پایین عناصر سه بعدی را مشخص می‌کند
backface-visibility مشخص می‌کند که هنگامی که یک عنصر در مقابل صفحه نمایش نیست، نمایش داده شود یا نه

متدهای 3D Transform[ویرایش | ویرایش]

تابع توضیحات
matrix3d

(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

یک تبدیل سه بعدی را با استفاده از یک ماترس 4*4 دارای 16 مقدار تعریف می کند
translate3d(x,y,z) یک تبدیل سه بعدی تعریف می کند
translateX(x) یک تبدیل سه بعدی را با استفاده از فقط محور X تعریف می کند
translateY(y) یک تبدیل سه بعدی را با استفاده از فقط محور Y تعریف می کند
translateZ(z) یک تبدیل سه بعدی را با استفاده از فقط محور Z تعریف می کند
scale3d(x,y,z) یک تبدیل سه بعدی scale تعریف می کند
scaleX(x) یک تبدیل سه بعدی scale را بوسیله دادن مقداری برای محور X تعریف می کند
scaleY(y) یک تبدیل سه بعدی scale را بوسیله دادن مقداری برای محور Y تعریف می کند
scaleZ(z) یک تبدیل سه بعدی scale را بوسیله دادن مقداری برای محور Z تعریف می کند
rotate3d(x,y,z,angle) یک چرخش سه بعدی تعریف می کند
rotateX(angle) یک چرخش سه بعدی حول محور X تعریف می‌کند
rotateY(angle) یک چرخش سه بعدی حول محور Y تعریف می‌کند
rotateZ(angle) یک چرخش سه بعدی حول محور Z تعریف می‌کند
perspective(n) یک چشم انداز perspective برای عنصر تبدیل یافته سه بعدی تعریف می کند

منابع آموزشی[ویرایش]