تبدیل CSS 2D

تبدیل CSS به شما امکان می دهد تا عناصر را حرکت دهید ، بچرخانید ، مقیاس بندی کنید و انحراف دهید.

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

چرخش 2 بعدی

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

  • transform

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

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

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

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

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

نکته: در فصل بعدی با تغییر شکل های سه بعدی آشنا خواهید شد.


روش ترجمه ()

ترجمه کردن

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

مثال زیر عنصر <div> را از موقعیت فعلی 50 پیکسل به سمت راست و 100 پیکسل به پایین منتقل می کند:

مثال

div {
  transform: translate(50px, 100px);
}

روش چرخش ()

چرخش

rotate()روش چرخش جهت عقربه های ساعت عنصر یا حرکت عقربه های ساعت با توجه به درجه داده شده.

مثال زیر عنصر <div> را در جهت عقربه های ساعت با 20 درجه می چرخاند:

مثال

div {
  transform: rotate(20deg);
}

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

مثال زیر عنصر <div> را در خلاف جهت عقربه های ساعت با 20 درجه می چرخاند:

مثال

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

روش مقیاس ()

مقیاس

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

مثال زیر عنصر <div> را دو برابر عرض اصلی و سه برابر ارتفاع اصلی خود افزایش می دهد:

مثال

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

مثال زیر عنصر <div> را به نصف عرض و ارتفاع اصلی آن کاهش می دهد:

مثال

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

روش scaleX ()

scaleX()روش افزایش یا کاهش عرض یک عنصر.

مثال زیر عنصر <div> را دو برابر عرض اصلی خود افزایش می دهد:

مثال

div {
  transform: scaleX(2);
}

مثال زیر عنصر <div> را به نصف عرض اصلی آن کاهش می دهد:

مثال

div {
  transform: scaleX(0.5);
}

روش scaleY ()

این scaleY()روش باعث افزایش یا کاهش ارتفاع یک عنصر می شود.

مثال زیر عنصر <div> را سه برابر ارتفاع اصلی خود افزایش می دهد:

مثال

div {
  transform: scaleY(3);
}

مثال زیر عنصر <div> را به نصف ارتفاع اصلی خود کاهش می دهد:

مثال

div {
  transform: scaleY(0.5);
}

روش skewX ()

skewX()روش را به هم بریزد یک عنصر در امتداد محور X توسط زاویه داده شده.

مثال زیر عنصر <div> را در امتداد محور X 20 درجه کج می کند:

مثال

div {
  transform: skewX(20deg);
}

روش skewY ()

skewY()روش را به هم بریزد یک عنصر در امتداد محور Y توسط زاویه داده شده.

مثال زیر عنصر <div> را 20 درجه در امتداد محور Y منحرف می کند:

مثال

div {
  transform: skewY(20deg);
}

روش skew ()

skew()روش را به هم بریزد یک عنصر در امتداد X و Y محور با زاویه داده شده است.

مثال زیر عنصر <div> را 20 درجه در امتداد محور X و 10 درجه در امتداد محور Y قرار می دهد:

مثال

div {
  transform: skew(20deg, 10deg);
}

اگر پارامتر دوم مشخص نشود ، مقدار آن صفر است. بنابراین ، مثال زیر عنصر <div> را 20 درجه در امتداد محور X منحرف می کند:

مثال

div {
  transform: skew(20deg);
}

روش ماتریس ()

چرخش

این matrix()روش تمام روش های تبدیل 2D را به یک ترکیب می کند.

روش () ماتریس شش پارامتر را شامل می شود ، حاوی توابع ریاضی ، که به شما امکان می دهد عناصر را بچرخانید ، مقیاس بندی کنید ، حرکت دهید (ترجمه کنید) و کج کنید.

پارامترها به شرح زیر است: ماتریس (scaleX () ، skewY () ، skewX () ، scaleY () ، translateX () ، translateY ())

مثال

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

منبع