٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش تبدیل 3D CSS

تبدیل 3D CSS CSS همچنین از تبدیل 3D استفاده می کند. برای مشاهده تفاوت بین تغییر شکل 2D و 3D ، روی عناصر زیر قرار دهید: چرخش 2 بعدی چرخش سه بعدی در این فصل شما با ویژگی CSS زیر…

محمد یوسفی

13 جولای 2021

تبدیل 3D CSS

CSS همچنین از تبدیل 3D استفاده می کند.

برای مشاهده تفاوت بین تغییر شکل 2D و 3D ، روی عناصر زیر قرار دهید:

چرخش 2 بعدی
چرخش سه بعدی

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

  • transform

پشتیبانی مرورگر

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



روش های تبدیل 3D CSS

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

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

روش rotateX ()

این rotateX()روش یک عنصر را در یک درجه مشخص به دور محور X خود می چرخاند:

مثال

#myDiv {
  transform: rotateX(150deg);
}

روش rotateY ()

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

مثال

#myDiv {
  transform: rotateY(150deg);
}

روش rotateZ ()

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

مثال

#myDiv {
  transform: rotateZ(90deg);
}

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها