آموزش کار با ویژگی Transforms در CSS3

مقدمه

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

توضیح مفهومی Transforms

Transforms شامل چندین نوع تغییر شکل روی عناصر است:

translate(X, Y) → جابجایی عنصر در محور افقی و عمودی
rotate(angle) → چرخش عنصر به زاویه مشخص
scale(X, Y) → تغییر اندازه عنصر در محور X و Y
skew(X, Y) → کج کردن عنصر در محورهای X و Y
matrix() → ترکیب چندین Transform با هم

مثال عملی با کد

جابجایی یک عنصر:

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

چرخش عنصر:

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

مقیاس‌دهی عنصر:

.box {
  transform: scale(1.5, 1.5);
}

ترکیب Transform ها:

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

نکات مهم و توضیحات تکمیلی

Transforms فقط ظاهر عنصر را تغییر می‌دهد و مکان اصلی عنصر در جریان سند حفظ می‌شود.
ترکیب چندین Transform باعث ایجاد افکت‌های پیچیده می‌شود.
برای ایجاد انیمیشن نرم، Transforms معمولاً با transition یا animation ترکیب می‌شوند.
Transfroms در طراحی واکنش‌گرا و تعاملات تعاملی بسیار مفید هستند.