Transform در CSS | حرکت، چرخش و تغییر سایز در CSS


نویسنده:
یکشنبه ۶ مهر ۱۳۹۹
Transform در CSS

در این جلسه از آموزش CSS قصد داریم به یک مبحث جذاب و سرگرم‌کننده بپردازیم و آن موضوع چیزی نیست جز بحث Transform در CSS. احتمالاً دیده‌اید در صفحات سایت وقتی اشاره‌گر موس را روی عنصری می‌برید، سایز تصویر یا نوشته کمی بزرگتر شود. یا گاهی دکمه‌ای را هاور می‌کنیم و دکمه شروع به چرخیدن می‌کند! این موارد در CSS به کمک ویژگی Transform قابل انجام است.

معرفی ویژگی Transform

در CSS به کمک ویژگی Transformها می‌توان عنصری را جابه‌جا کرد، چرخاند یا تغییر سایز داد. این موارد در حالت دو بعدی و سه بعدی قابل انجام هستند.

به کمک متدهای تعریف شده برای ویژگی Transform‌می‌توان اعمال مختلفی را بر روی عناصر ایجاد کرد. در ادامه مقاله لیستی از متدهای ۲بعدی Transform را مشاهده می‌کنید.


متدهای ۲بعدی Transform در CSS

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

همراه ادمین سایت باشید تا هر متد را با مثال بررسی کنیم.

معرفی متد ()Translate

به کمک دستور Translate می‌توان عنصر را از جایگاه خود به جایگاه دیگری منتقل کرد. این انتقال به کمک محور x و محور y قابل انجام است.(در CSS محور به سمت پایین را محور Y‌ در جهت مثبت در نظر می‌گیریم.)

همانگونه که در تصویر زیر مشخص است، باکس سبز ۵۰ پیسکل به جهت راست و ۸۰ پیسکل به جهت پایین حرکت کرده است. برای حرکت به چپ یا بالا از اعداد منفی استفاده کنید.

Transform در CSS
(translate(50px, 80px


معرفی متد ()Rotate

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

rotate  در CSS
(rotate(35deg


معرفی متد ()Scale

از متد scale برای تغییر اندازه طول یا عرض عنصر استفاده می‌شود. اعدادی که در متد Scale قرار می‌دهیم مضارب یا درصدی از طول و عرض کنونی آن هستند. برای مثال (scale(0.5, 0.5 طول و عرض عنصر را نصف می‌کند.

 متد scale
(scale(1.5, 2

توجه کنید که scale می‌تواند فقط در جهت X یا Y باشد که در این صورت آن را به این شکل نمایش می‌دهیم:

 متد scale


معرفی متد ()Skew

از متد Skew برای کج کردن یک عنصر در راستای X یا Y استفاده می‌شود. مقدار آن بر اساس درجه قابل تعیین است:

Skew در CSS
(skew(20deg, 10deg

این متدها می‌تواند فقط در راستای X یا Y تعیین شود. برای اینکار از دستورات زیر استفاده میکنیم:

Transform در CSS


معرفی متد Matrix

و اما متد آخر، متد ماتریس است که همه‌ی موارد قبلی را در برمی‌گیرد. در واقع این یک دستور جدید نیست بلکه قابلیتی است که اجازه می‌دهد شما از تمامی متدها در کنار هم استفاده کنید. فرمت کلی یک ماتریس:

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

دیدگاهتان را بنویسید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *