Transformهای 2D

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
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) Chrome Internet Explorer / Edge Firefox Safari Opera
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()

Transform translate.gif

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

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

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


متد rotate()

Transform rotate.gif

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

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

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


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

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

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


متد scale()

Transform scale.gif

متد 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()

Transform rotate.gif

متد 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 تعریف می کند


منابع آموزشی