ویژگی transform در CSS به شما امکان می‌دهد که تغییراتی مانند چرخش (rotate)، مقیاس (scale)، تغییر مکان (translate) و کج کردن (skew) را روی عناصر HTML اعمال کنید، بدون اینکه بر موقعیت سایر عناصر تأثیر بگذارد.

این ویژگی به ویژه برای طراحی‌های مدرن، جلوه‌های گرافیکی و انیمیشن‌های سبک بسیار کاربردی است.

مقادیر transform و نحوه استفاده

ویژگی transform می‌تواند مقادیر مختلفی داشته باشد که هر کدام یک نوع تغییر را روی عنصر اعمال می‌کنند. در ادامه برخی از مقادیر پرکاربرد بررسی می‌شود:

۱. translate (جابجایی)

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

.box {
    transform: translate(50px, 20px); /* جابجایی ۵۰ پیکسل به راست و ۲۰ پیکسل به پایین */
}

۲. scale (مقیاس)

برای بزرگ یا کوچک کردن عنصر در راستای محورهای X و Y به کار می‌رود.

.box {
    transform: scale(1.5); /* افزایش اندازه به ۱.۵ برابر */
}

.box {
    transform: scale(1.5, 0.8); /* عرض ۱.۵ برابر و ارتفاع ۰.۸ برابر */
}

۳. rotate (چرخش)

برای چرخش عنصر حول یک نقطه مشخص استفاده می‌شود. مقدار آن به درجه (deg) تعیین می‌شود.

.box {
    transform: rotate(45deg); /* چرخش ۴۵ درجه در جهت عقربه‌های ساعت */
}

۴. skew (کج کردن)

برای ایجاد حالت کج شدن (شیب) در راستای محورهای X و Y به کار می‌رود.

.box {
    transform: skew(20deg, 10deg); /* کج شدن ۲۰ درجه در راستای X و ۱۰ درجه در راستای Y */
}

۵. matrix (ترکیبی)

این مقدار امکان اعمال چندین تغییر را به‌صورت همزمان با یک ماتریس ریاضی فراهم می‌کند.

.box {
    transform: matrix(1, 0.5, -0.5, 1, 50, 20);
}

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

ترکیب چند مقدار transform

شما می‌توانید چند مقدار transform را همزمان روی یک عنصر اعمال کنید.

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

این کد ابتدا عنصر را جابجا کرده، سپس آن را می‌چرخاند و در نهایت مقیاس آن را تغییر می‌دهد.

تعیین نقطه مبدا (transform-origin)

به طور پیش‌فرض، تمامی تغییرات نسبت به مرکز عنصر انجام می‌شود. اما می‌توان نقطه مبدا (origin) را تغییر داد.

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

در این مثال، چرخش عنصر حول گوشه بالا-چپ انجام می‌شود.

جمع‌بندی

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