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);
}

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

Related posts

Don't miss reading these posts!
JavaScript - کلمه کلیدی Let (Let)

JavaScript – کلمه کلیدی Let (Let)

تعریف let کلیدواژه let در ES6 (2015) معرفی شد و دارای ویژگی‌های خاصی است که آن را از var...

Read more
JavaScript - متغیرها (Variables)

JavaScript – متغیرها (Variables)

متغیرها در جاوا اسکریپت متغیرها در جاوا اسکریپت به عنوان ظرف‌هایی برای ذخیره‌سازی داده‌ها استفاده می‌شوند و می‌توانند به...

Read more
JavaScript - کامنت‌ها (Comments)

JavaScript – کامنت‌ها (Comments)

کامنت‌ها در جاوا اسکریپت کامنت‌ها در جاوا اسکریپت به برنامه‌نویسان این امکان را می‌دهند تا توضیحاتی را به کد...

Read more

Comments

Share your comments with us

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