Transformهای 2D

Main Page Tutorial
موارد آموزشی
CSS پیشرفته
۱	گوشه‌های گرد
۲	کادر تصاویر
۳	پس‌زمینه‌ها
۴	رنگ‌ها
۵	Gradientها
۶	سایه‌ها
۷	افکت‌های متن
۸	قلم‌های وب
۹	2D Transforms
۱۰	3D Transforms
۱۱	Transitions
۱۲	انیمیشن‌ها
۱۳	Tooltip
۱۴	استایل‌دهی تصاویر
۱۵	ویژگی object-fit
۱۶	دکمه‌ها
۱۷	مثال‌های صفحه‌بندی (Pagination)
۱۸	ستون‌های متعدد
۱۹	رابط کاربری
۲۰	متغیرها
۲۱	Box Sizing
۲۲	Flexbox
۲۳	Media Queries
۲۴	مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

تبدیل ها (Transforms) در CSS به شما اجازه جابه جایی، چرخش، scale، و کج کردن عناصر را می‌دهد.

نشانه‌گر ماوس را روی عنصر زیر قرار دهید تا یک چرخش دوبعدی را ببینید:

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

• transform

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

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

ویژگی (به انگلیسی: Property)
transform	۳۶٫۰	۱۰٫۰	۱۶٫۰	۹٫۰	۲۳٫۰

پیشوندهای خاص مرورگر

برخی از مرورگرهای قدیمی (IE9) برای فهمیدن ویژگی‌های تبدیل دوبعدی نیازمند پیشوندهای خاص (-ms-) هستند:

مثال

div {
  -ms-transform: rotate(20deg); /* IE 9 */
  transform: rotate(20deg); /* Standard syntax */
}

مشاهدهٔ نتیجه

متدهای تبدیل های دوبعدی در CSS

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

• translate()

• rotate()

• scaleX()

• scaleY()

• scale()

• skewX()

• skewY()

• skew()

• matrix()

نکته: مطالبی را در مورد 3D Transform در فصل بعدی خواهید آموخت.

متد translate()

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

مثال زیر عنصر <div> را از موقعیت فعلی خود به ۵۰ پیکسل به سمت راست، و ۱۰۰ پیکسل به سمت پایین جابه‌جا می‌کند:

مثال

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

مشاهدهٔ نتیجه

متد rotate()

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

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

مثال

div {
  transform: rotate(20deg);
}

مشاهدهٔ نتیجه

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

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

مثال

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

مشاهدهٔ نتیجه

متد scale()

متد 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 کج می‌کند.

مثال

div {
  transform: skewX(20deg);
}

مشاهدهٔ نتیجه

متد skewY()

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

مثال زیر عنصر <div> را ۲۰ درجه روی محور Y کج می‌کند:

مثال

div {
  transform: skewY(20deg);
}

مشاهدهٔ نتیجه

متد skew()

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

مثال زیر عنصر <div> را ۲۰ درجه روی محور X، و ۱۰ درجه روی محور Y کج می‌کند:

مثال

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

مشاهدهٔ نتیجه

اگر پارامتر دوم مشخص نشود، مقدار آن صفر در نظر گرفته می‌شود؛ بنابراین مثال زیر عنصر <div> را ۲۰ درجه روی محور X کج می‌کند:

مثال

div {
  transform: skew(20deg);
}

مشاهدهٔ نتیجه

متد matrix()

متد matrix() تمامی متدهای تبدیل دوبعدی را در یک متد ترکیب می‌کند.

متد matrix() شش پارامتر دریافت می‌کند، که شامل تابع‌های ریاضی می‌شود، که به شما اجازه چرخش، scale، جابجایی (Translate)، و کج کردن عناصر را می دهد.

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

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

مثال

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

مشاهدهٔ نتیجه

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

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

ویژگی	توضیحات
transform	یک تبدیل دوبعدی یا سه بعدی را به عنصر اعمال می‌کند
transform-origin	به شما اجازه می‌دهد که موقعیت تبدیل یافته را تغییر دهید

متدهای 2D Transform در CSS

تابع	توضیحات
matrix(n,n,n,n,n,n)	یک تبدیل دو بعدی تعریف می کند که از یک ماتریس شش مقداری استفاده می کند
translate(x,y)	یک تبدیل دوبعدی تعریف می کند که عناصر را در امتداد محور X و Y جابجا می کند
translateX(n)	یک تبدیل دوبعدی تعریف می کند که عناصر را در امتداد محور X جابجا می کند
translateY(n)	یک تبدیل دوبعدی تعریف می کند که عناصر را در امتداد محور Y جابجا می کند
scale(x,y)	یک تبدیل دوبعدی scale تعریف می کند که عرض و ارتفاع عنصر را تغییر می دهد
scaleX(n)	یک تبدیل دوبعدی scale تعریف می کند که عرض عنصر را تغییر می دهد
scaleY(n)	یک تبدیل دوبعدی scale تعریف می کند که ارتفاع عنصر را تغییر می دهد
rotate(angle)	یک چرخش دوبعدی تعریف می کند، زاویه آن در پارامتر تعیین می شود
skew(x-angle,y-angle)	یک تبدیل مورب در امتداد محورهای X و Y تعریف می کند
skewX(angle)	یک تبدیل مورب در امتداد محور X تعریف می کند
skewY(angle)	یک تبدیل مورب در امتداد محور Y تعریف می کند

صفحهٔ بعد»

«صفحهٔ قبل