آموزش transform در css

آموزش transform در css یکی از ابزارهای قدرتمند برای ایجاد تغییرات بصری روی عناصر HTML است. با استفاده از transform می‌توان عناصری مانند تصاویر، دکمه‌ها، یا بلوک‌های متنی را بدون نیاز به جاوااسکریپت حرکت داد، چرخاند، بزرگ‌ یا کوچک‌ کرد و حتی به شکل سه‌بعدی تغییر داد. اصلی‌ترین توابعی که در transform استفاده می‌شوند شامل موارد زیر هستند:

1. translate( ): برای جابجایی یک عنصر در محور افقی (X) و عمودی (Y) استفاده می‌شود. transform: translate(50px, 20px)

• این کد عنصر را ۵۰ پیکسل به سمت راست و ۲۰ پیکسل به سمت پایین حرکت می‌دهد.

• rotate(): برای چرخاندن عنصر حول مرکز آن کاربرد دارد. واحد آن درجه است. transform: rotate(45deg)

• عنصر را ۴۵ درجه در جهت عقربه‌های ساعت می‌چرخاند.

• scale(): برای بزرگ‌نمایی یا کوچک‌نمایی عنصر. عددی بیشتر از ۱ باعث بزرگ‌تر شدن و عددی کمتر از ۱ باعث کوچک‌تر شدن عنصر می‌شود. transform: scale(1.5)

• عنصر را ۱.۵ برابر بزرگ‌تر می‌کند.

• skew(): برای کج کردن عنصر در محور افقی و/یا عمودی استفاده می‌شود. transform: skew(20deg, 10deg)

  1. عنصر را به صورت مورب تغییر شکل می‌دهد.

  2. matrix(): یک تابع پیشرفته‌تر است که ترکیبی از توابع بالا را با استفاده از مقادیر ماتریسی پیاده‌سازی می‌کند.

• ویژگی transform به تنهایی انیمیشن ایجاد نمی‌کند، ولی زمانی که با transition یا animation ترکیب شود، می‌توان حرکات نرم و جذابی ایجاد کرد. برای مثال، با ترکیب transform و transition می‌توان هنگام حرکت موس روی یک دکمه، آن را بزرگ‌تر کرد.

  button {   
  transition: transform 0.3s ease     
  button:hover }      
  {          
  transform: scale(1.2)         
  }          

در این مثال، دکمه هنگام هاور شدن با موس به آرامی بزرگ‌تر می‌شود و جلوه زیبایی به رابط کاربری می‌دهد. در نهایت، transform ابزاری مهم برای ایجاد افکت‌های تعاملی، طراحی‌های واکنش‌گرا، و رابط‌های کاربر پسند است.