آموزش CSS Transforms و کاربردهای scaleX()

اگه یه کم با CSS آشنا باشی، حتماً می‌دونی که توی طراحی وب، جزئیات کوچک می‌تونن تاثیر خیلی زیادی روی طراحی کلی داشته باشن. یکی از این ویژگی‌های جذاب توی CSS، transforms هست که باهاش میتونی اندازه، موقعیت یا حتی زاویه المان‌ها رو تغییر بدی. یکی از محبوب‌ترین انواع transform، scaleX() هست که به طور خاص برای تغییر عرض یا همون محور ایکس المان استفاده میشه.

برای واضح شدن مطلب، فرض کن که می‌خوای یه دکمه توی سایتت داشته باشی که وقتی کاربر روش نگه می‌داره یا کلیک می‌کنه، پهن‌تر بشه. دقیقاً همین‌جا scaleX() می‌تونه به کارت بیاد. با استفاده از این ویژگی، بدون نیاز به تغییرات دیگه در کد، می‌تونی به شکلی زیبا و جذاب، عرض دکمه رو گسترش بدی.

یه نکته مهم که باید همیشه در نظر داشته باشی اینه که transforms ها برخلاف سایر ویژگی‌های CSS مثل margin و padding، به صورت ترکیبی عمل می‌کنن. یعنی اگه بخوای یک المان رو با scaleX() تغییر بدی و یه transform دیگه هم روش اجرا کنی، هر دو اعمال میشن نه اینکه یکی جایگزین دیگری بشه.

یه مثال ساده برای استفاده از scaleX() اینه که توی یه انیمیشن، با یه کلیک، لوگوی سایت پهن‌تر بشه یا هنگام هاور شدن روی یه لینک، اون لینک برجسته‌تر بشه. لذا، استفاده از CSS transforms برای سایت‌هایی که به دنبال تجربه کاربری جذاب و پویا هستند، بسیار توصیه میشه.

بیایید حالا نگاهی به یه نمونه کد داشته باشیم که نشون بده چطور میشه از scaleX() توی پروژه واقعی استفاده کرد:

  .button {
    background-color: #008CBA;
    color: white;
    padding: 10px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scaleX(1.2);
  }
  

توضیحات هر خط:

.button
این کلاس برای تعریف استایل‌های پایه دکمه استفاده شده.

background-color: #008CBA;
رنگ پس‌زمینه دکمه رو به یک رنگ آبی تغییر می‌ده.

color: white;
رنگ متن دکمه رو سفید می‌کنه.

padding: 10px 24px;
فاصله داخلی دکمه رو بالا و پایین 10 پیکسل و چپ و راست 24 پیکسل قرار می‌ده.

text-align: center;
متن رو در مرکز دکمه قرار می‌ده.

text-decoration: none;
دکمه هیچ زیرخطی نداره.

display: inline-block;
چیدمان رو به حالت inline-block تغییر می‌ده تا بتونی کنترل بهتری روی اندازه و فاصله‌ها داشته باشی.

font-size: 16px;
اندازه فونت متن دکمه رو تعیین می‌کنه.

transition: transform 0.3s ease;
اعمال تغییرات scaleX رو به صورت نرم و در مدت 0.3 ثانیه اجرا می‌کنه.

.button:hover
حالت هاور برای دکمه تعریف شده.

transform: scaleX(1.2);
عرض دکمه رو 1.2 برابر بزرگتر می‌کنه وقتی کاربر روی اون هاور می‌کنه.