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 برای عنصر تبدیل یافته سه بعدی تعریف می کند

منابع آموزشی