آموزش ویژگی Transform دو بعدی در CSS

Transformهای دوبعدی در CSS

transform ها به ما امکان می دهند تا عناصر را حرکت دهیم، بچرخانیم، مقیاس دهی(scale) کنیم، و یا کج(skew) کنیم. برای مشاهده ی یک transform دوبعدی، ماوس خود را روی مربع زیر ببرید:

در این فصل، در مورد ویژگی transform نکاتی را توضیح خواهیم داد.

تابع های Transform دوبعدی در CSS

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

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

 نکته: در مقالات بعدی در مورد تبدیل های سه بعدی(3D transformations) نکاتی را ذکر خواهیم نمود.

آموزش تابع translate() در CSS

تابع translate() یک عنصر را (بسته به پارامترهای داده شده ی محور X و Y) از مبدا خود حرکت می دهد. در مثال زیر، عنصر <div> مقدار 50 پیکسل به سمت راست و به مقدار 100 پیکسل نسبت به موقعیت فعلی خود به سمت پایین منتقل شده است:

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

بررسی تابع ()rotate

تابع rotate() یک عنصر را به صورت ساعتگرد یا پادساعتگرد به اندازه ی یک درجه ی داده شده می چرخاند. در مثال زیر، یک عنصر <div> را به صورت ساعتگرد به اندازه ی20 درجه می چرخانیم:

div {
  transform: rotate(20deg);
}

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

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

بررسی تابع scale() در CSS

 تابع scale() بسته به پارامترهای داده شده برای عرض و ارتفاع، سایز یک عنصر را افزایش یا کاهش می دهد. مثال زیر، عرض عنصر <div> را دو برابر عرض اصلی و ارتفاع آن را سه برابر ارتفاع اصلی قرار می دهد:

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

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

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

تابع scaleX() در CSS

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

div {
  transform: scaleX(2);
}

در مثال زیر، عرض عنصر <div> نصف عرض اصلی آن است:

div {
  transform: scaleX(0.5);
}

بررسی تابع scaleY() در CSS

تابع scaleY() ارتفاع(height) یک عنصر را افزایش یا کاهش می دهد. در مثال زیر، ارتفاع عنصر <div> سه برابر ارتفاع اصلی آن است:

div {
  transform: scaleY(3);
}

در مثال زیر، ارتفاع عنصر <div> برابر با نصف ارتفاع اصلی آن است:

div {
  transform: scaleY(0.5);
}

 بررسی تابع ()skewX در CSS

تابع skewX() یک عنصر را در طول محور X با یک زاویه ی داده شده، کج می کند. مثال زیر عنصر <div> را 20 درجه در طول محور X کج می کند:

div {
  transform: skewX(20deg);
}

بررسی تابع ()skewY

تابع skewY() یک عنصر را در طول محور Y به مقدار یک زاویه ی داده شده کج می کند. در مثال زیر یک عنصر <div> داریم که به اندازه ی 20 درجه در طول محور Y کج شده است:

div {
  transform: skewY(20deg);
}

بررسی تابع ()skew در CSS

تابع  skew() یک عنصر را در طول محورهای X و Y به مقدار دو زاویه ی داده شده کج می کند. مثال زیر، یک عنصر <div> را 20 درجه در طول محور X و 10 درجه در طول محور Y کج می کند:

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

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

div {
  transform: skew(20deg);
}

 آموزش تابع ()matrix در CSS

 تابع matrix() تمام تابع های transform دو بعدی را با یکدیگر (در قالب یک ماتریکس) ترکیب می کند. تابع matrix() شش پارامتر می گیرد که شامل تابع های ریاضی می شود که به ما امکان می دهند تا عناصر اعمال زیر را روی عنصر انجام دهیم:

• چرخاندن(rotate)
• مقیاس دهی(scale)
• حرکت دادن(translate)
• کج کردن(skew)

ترتیب این پارامترها به صورت زیر است:

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

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

ویژگی های Transform در CSS

در جدول زیر، لیست تمام ویژگی های transform دوبعدی نشان داده شده است:

تابع های دوبعدی Transform در CSS