CSS – تبدیلات سه بعدی (۳D Transforms)

تبدیل‌های سه‌بعدی در CSS (CSS 3D Transforms)

CSS همچنین از تبدیل‌های سه‌بعدی پشتیبانی می‌کند. این تبدیل‌ها به شما اجازه می‌دهند عناصر را در فضای سه‌بعدی بچرخانید.

روش‌های تبدیل سه‌بعدی

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

  • rotateX() – چرخش حول محور X
  • rotateY() – چرخش حول محور Y
  • rotateZ() – چرخش حول محور Z

روش rotateX()

این روش عنصر را حول محور X و به زاویه‌ای که مشخص می‌کنید می‌چرخاند.

مثال:

چرخش حول محور X با زاویه 150 درجه:

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

روش rotateY()

این روش عنصر را حول محور Y و به زاویه‌ای که مشخص می‌کنید می‌چرخاند.

مثال:

چرخش حول محور Y با زاویه 150 درجه:

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

روش rotateZ()

این روش عنصر را حول محور Z می‌چرخاند.

مثال:

چرخش حول محور Z با زاویه 90 درجه:

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

این تبدیل‌ها به شما امکان می‌دهند تا به راحتی عناصر را در فضای سه‌بعدی کنترل و تنظیم کنید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.