در CSS، ویژگی‌های skew و translate دو قابلیت مهم از ویژگی transform هستند که برای تغییر شکل و موقعیت عناصر استفاده می‌شوند.

در این مقاله، نحوه استفاده از این دو ویژگی و کاربردهای آن‌ها را بررسی خواهیم کرد.

۱. ویژگی translate در CSS

ویژگی translate برای جابجایی یک عنصر در محورهای X و Y (و در موارد پیشرفته‌تر، در محور Z) بدون تغییر در ساختار صفحه استفاده می‌شود.

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

فرمت کلی این ویژگی به صورت زیر است:

transform: translate(x, y);

✅ مقدار x مشخص می‌کند که عنصر چقدر در راستای افقی جابجا شود.
✅ مقدار y مشخص می‌کند که عنصر چقدر در راستای عمودی جابجا شود.

مثال: جابجایی یک عنصر ۵۰ پیکسل به راست و ۲۰ پیکسل به پایین

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

✅ مقدار مثبت باعث حرکت عنصر به راست و پایین می‌شود.
✅ مقدار منفی باعث حرکت عنصر به چپ و بالا می‌شود.

مثال: جابجایی فقط در یک جهت

.box {
    transform: translateX(100px); /* فقط ۱۰۰ پیکسل به راست */
}

.box {
    transform: translateY(-50px); /* فقط ۵۰ پیکسل به بالا */
}

ترجمه سه‌بعدی (translateZ)

اگر از CSS سه‌بعدی استفاده کنید، می‌توانید عنصر را در راستای محور Z نیز جابجا کنید:

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

✅ مقدار translateZ(30px) باعث جابجایی در عمق صفحه می‌شود.

۲. ویژگی skew در CSS

ویژگی skew برای کج کردن (شیب دادن) یک عنصر در راستای محورهای X و Y استفاده می‌شود. این ویژگی بیشتر در طراحی‌های گرافیکی برای ایجاد جلوه‌های خاص کاربرد دارد.

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

فرمت کلی این ویژگی به صورت زیر است:

transform: skew(x, y);

✅ مقدار x مشخص می‌کند که عنصر چقدر در راستای افقی کج شود.
✅ مقدار y مشخص می‌کند که عنصر چقدر در راستای عمودی کج شود.

مثال: کج کردن یک عنصر ۲۰ درجه در راستای X و ۱۰ درجه در راستای Y

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

✅ مقدار مثبت باعث کج شدن به سمت راست و پایین می‌شود.
✅ مقدار منفی باعث کج شدن به سمت چپ و بالا می‌شود.

مثال: کج کردن فقط در یک جهت

.box {
    transform: skewX(30deg); /* فقط در راستای افقی کج می‌شود */
}

.box {
    transform: skewY(-15deg); /* فقط در راستای عمودی کج می‌شود */
}

۳. ترکیب translate و skew در CSS

می‌توان translate و skew را با هم ترکیب کرد تا افکت‌های جذاب‌تری ایجاد شود.

مثال: جابجایی و کج کردن همزمان یک عنصر

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

✅ ابتدا عنصر ۵۰ پیکسل به راست و ۲۰ پیکسل به پایین حرکت می‌کند.
✅ سپس ۲۰ درجه در راستای X و ۱۰ درجه در راستای Y کج می‌شود.

۴. انیمیشن translate و skew با CSS

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

مثال: انیمیشن جابجایی و کج شدن

@keyframes moveAndSkew {
    0% {
        transform: translate(0, 0) skew(0deg, 0deg);
    }
    50% {
        transform: translate(50px, 20px) skew(10deg, 5deg);
    }
    100% {
        transform: translate(0, 0) skew(0deg, 0deg);
    }
}

.box {
    animation: moveAndSkew 3s infinite alternate;
}

✅ این انیمیشن باعث می‌شود که عنصر جابجا و کج شود و دوباره به حالت اول برگردد.

۵. جمع‌بندی

✔ translate برای جابجایی عنصر در محورهای X و Y استفاده می‌شود.
✔ skew برای کج کردن عنصر در راستای افقی و عمودی کاربرد دارد.
✔ می‌توان این دو ویژگی را برای جلوه‌های پیچیده‌تر ترکیب کرد.
✔ استفاده از animation همراه با translate و skew به ایجاد جلوه‌های بصری جذاب کمک می‌کند.

با یادگیری این مفاهیم، می‌توانید افکت‌های خلاقانه و حرفه‌ای در طراحی وب‌سایت خود ایجاد کنید! 🚀