CSS 2D Transforms
توی CSS میتونیم با خاصیت transform
المانها رو در ۲ بعد (X و Y) تغییر بدیم؛ مثل حرکت، چرخش، تغییر اندازه و کج کردن.
🔹 دستور کلی
📌 به جای function(value)
یکی از توابع ترنسفورم قرار میگیره.
🔹 انواع 2D Transform
1. translate(x, y)
→ جابهجایی
المان رو در محور X و Y حرکت میده.
✅ ۵۰px به راست و ۱۰۰px به پایین جابهجا میشه.
2. rotate(angle)
→ چرخش
المان رو حول مرکز خودش میچرخونه.
✅ المان ۴۵ درجه میچرخه.
3. scale(x, y)
→ تغییر اندازه
المان رو بزرگتر یا کوچکتر میکنه.
✅ عرض ۱.۵ برابر و ارتفاع ۲ برابر میشه.
4. skew(x-angle, y-angle)
→ کج کردن
المان رو روی محور X و Y کج میکنه.
✅ ۲۰ درجه در X و ۱۰ درجه در Y کج میشه.
5. matrix(a, b, c, d, e, f)
→ ترکیب چند تغییر
یک ماتریس ۲ بعدی برای ترکیب translate, scale, skew و rotate.
📌 معمولاً کمتر مستقیم استفاده میشه (پیچیده است).
🔹 ترکیب چند transform
میتونی چندتا تابع رو پشت سر هم بنویسی:
🔹 تغییر نقطه مرجع (transform-origin)
به صورت پیشفرض، مرکز المان مبنای تغییراته. میتونی عوضش کنی:
✅ این بار از گوشه بالا-چپ میچرخه.
🔹 مثال کامل
✅ نتیجه: وقتی موس میره روی مربع، هم میچرخه، هم بزرگ میشه، هم جابهجا میشه.