آموزش کامل مقادیر transform در CSS با مثال‌های کاربردی

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

در این مقاله به‌صورت کامل با مقادیر مختلف transform در CSS آشنا می‌شوید. همچنین برای هر مقدار، مثال‌های عملی و توضیح گام‌به‌گام ارائه شده است.

transform چیست؟

ویژگی transform در CSS به شما این امکان را می‌دهد که بدون نیاز به جاوااسکریپت، روی ظاهر و موقعیت عناصر تغییراتی ایجاد کنید.

نحوه استفاده از transform

.element {
  transform: rotate(45deg);
}

آیا میدانید مدرسه فرانت اند پرنیان، دوره فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟

1. translate

ویژگی translate برای جابه‌جایی عنصر استفاده می‌شود.

50px: جابه‌جایی در محور X.

20px: جابه‌جایی در محور Y.

.box {
  transform: translate(50px, 20px);
}

2. translateX و translateY

برای جابه‌جایی فقط در یک محور استفاده می‌شوند.

.box {
  transform: translateX(100px);
}

3. scale

برای تغییر اندازه (بزرگ‌نمایی یا کوچک‌نمایی) عنصر به‌کار می‌رود.

1 مقدار پیش‌فرض است.

کمتر از 1 عنصر را کوچک‌تر می‌کند.

بیشتر از 1 آن را بزرگ‌تر می‌کند.

.box {
  transform: scale(1.5);
}

4. scaleX و scaleY

اگر بخواهید فقط در یک محور تغییر اندازه دهید:

.box {
  transform: scaleX(2);
}

5. rotate

برای چرخش عنصر در صفحه به‌کار می‌رود.

واحد زاویه:

• deg: درجه.
• rad: رادیان.

.box {
  transform: rotate(45deg);
}

6. skew

برای خم‌کردن عنصر در محور X و Y استفاده می‌شود.

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

7. skewX و skewY

تغییر زاویه در محور X یا Y به‌صورت جداگانه:

.box {
  transform: skewX(30deg);
}

8. matrix

مقداری پیچیده‌تر است که ترکیبی از translate، scale، skew و rotate را در یک تابع انجام می‌دهد.

.box {
  transform: matrix(1, 0.3, 0.2, 1, 30, 20);
}

اعمال چند transform به‌صورت هم‌زمان

شما می‌توانید چندین مقدار را به صورت زنجیره‌ای ترکیب کنید:

.box {
  transform: translate(50px, 0) rotate(30deg) scale(1.2);
}

توجه به origin

ویژگی transform-origin تعیین می‌کند نقطه مرجع برای transform کجاست:

.box {
  transform: rotate(45deg);
  transform-origin: top left;
}

در یک مثال کاربردی میخواهیم به بررسی ساخت دکمه با افکت بزرگ‌نمایی بپردازیم.

<button class="zoom-btn">Hover me</button>

.zoom-btn {
  padding: 10px 20px;
  background-color: royalblue;
  color: white;
  border: none;
  transition: transform 0.2s ease;
}
.zoom-btn:hover {
  transform: scale(1.1);
}

تفاوت بین position و transform

• position باعث تغییر مکان واقعی عنصر می‌شود.
• transform فقط ظاهر بصری را تغییر می‌دهد (موقعیت فیزیکی تغییر نمی‌کند).

ابزارهای کمکی برای مشاهده transform

1. CSS Transform Generator
2. Transform Playground

امیدواریم از این مقاله آموزش کامل مقادیر transform نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.