Transformهای 3D

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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


منابع آموزشی