CSS – تبدیلات دو بعدی (۲D Transforms)

تبدیل‌های دوبعدی (CSS 2D Transforms)

CSS این امکان را فراهم می‌کند تا عناصر را حرکت دهید، بچرخانید، بزرگ و کوچک کنید و یا تغییر شکل دهید.

روش‌های تبدیل دوبعدی (2D Transform)

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

  • translate() – حرکت عنصر
  • rotate() – چرخش عنصر
  • scaleX() – تغییر اندازه عرض
  • scaleY() – تغییر اندازه ارتفاع
  • scale() – تغییر اندازه عرض و ارتفاع
  • skewX() – انحراف در محور X
  • skewY() – انحراف در محور Y
  • skew() – انحراف در هر دو محور
  • matrix() – ترکیبی از تمامی این روش‌ها

روش translate()

روش translate() یک عنصر را از موقعیت فعلی‌اش جابجا می‌کند. دو پارامتر برای محور X و Y می‌گیرد.

مثال:
div {
  transform: translate(50px, 100px);
}

روش rotate()

روش rotate() عنصر را به زاویه مشخصی می‌چرخاند. برای چرخش در جهت عقربه‌های ساعت از مقادیر مثبت و برای چرخش در خلاف جهت از مقادیر منفی استفاده کنید.

مثال:

چرخش در جهت عقربه‌های ساعت:

div {
  transform: rotate(20deg);
}

چرخش در خلاف جهت:

div {
  transform: rotate(-20deg);
}

روش scale()

روش scale() اندازه یک عنصر را بر اساس عرض و ارتفاع تغییر می‌دهد.

مثال:

دو برابر کردن عرض و سه برابر کردن ارتفاع:

div {
  transform: scale(2, 3);
}

کاهش اندازه به نصف:

div {
  transform: scale(0.5, 0.5);
}

روش scaleX()

روش scaleX() فقط عرض یک عنصر را تغییر می‌دهد.

مثال:
div {
  transform: scaleX(2);
}

روش scaleY()

روش scaleY() فقط ارتفاع یک عنصر را تغییر می‌دهد.

مثال:
div {
  transform: scaleY(3);
}

روش skewX()

روش skewX() عنصر را در محور X به زاویه مشخصی انحراف می‌دهد.

مثال:
div {
  transform: skewX(20deg);
}

روش skewY()

روش skewY() عنصر را در محور Y به زاویه مشخصی انحراف می‌دهد.

مثال:
div {
  transform: skewY(20deg);
}

روش skew()

روش skew() عنصر را هم‌زمان در هر دو محور X و Y انحراف می‌دهد.

مثال:
div {
  transform: skew(20deg, 10deg);
}

روش matrix()

روش matrix() تمامی تبدیل‌های دوبعدی را در یک دستور ترکیب می‌کند و شش پارامتر دارد:

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

این پارامترها ترتیب زیر را دارند:

  • matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

پست های مرتبط

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

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

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

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

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

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

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

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

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

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

نظرات

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

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