1. تعریف کلی

تابع matrix() در CSS یکی از توابع transform هست که به ما اجازه می‌ده ترکیبی از چندین تبدیل (translate, scale, skew, rotate) رو توی یک دستور واحد بنویسیم.
در واقع مرورگر وقتی چندتا transform پشت‌سرهم مینویسی (مثلاً rotate + scale + translate)، پشت صحنه همه رو به شکل یک ماتریس محاسبه و ذخیره می‌کنه.

2. شکل دستور

transform: matrix(a, b, c, d, e, f);

این دستور معادل یک ماتریس 2D transformation هست.

3. معنی هر پارامتر

ماتریس به شکل زیر تعریف میشه:

| a  c  e | | b  d  f | | 0  0  1 |

و هر ستونش معنی خاصی داره:

• a, d → برای scale (مقیاس در X و Y) و همچنین cosθ و sinθ در چرخش‌ها
• b, c → برای skew (کج‌کردن) یا در ترکیب با چرخش تغییر می‌کنن
• e, f → برای translate (جابجایی در محور X و Y)

4. مثال ساده

الف) جابجایی (Translate)

transform: translate(50px, 100px);

برابر با:

transform: matrix(1, 0, 0, 1, 50, 100);

ب) مقیاس (Scale)

transform: scale(2, 3);

برابر با:

transform: matrix(2, 0, 0, 3, 0, 0);

ج) چرخش (Rotate)

transform: rotate(θdeg);

برابر با:

transform: matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0);

مثلاً:

transform: rotate(45deg);

تقریباً میشه:

transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);

د) ترکیب

اگر بنویسی:

transform: translate(100px, 50px) rotate(45deg) scale(2, 1.5);

مرورگر همه اینا رو توی یک ماتریس محاسبه می‌کنه و نتیجه چیزی مثل این میشه:

transform: matrix(1.414, 1.061, -1.414, 1.061, 100, 50);

5. کاربردهای عملی

• انیمیشن‌های پیشرفته: بعضی وقت‌ها برای کارایی بهتر یا برای تولید خودکار توسط مرورگر.
• تغییرات ترکیبی: وقتی همزمان rotate + scale + skew + translate داری.
• Generated values: ابزارهای گرافیکی (مثل Chrome DevTools یا Illustrator) معمولاً از matrix استفاده می‌کنن چون دقیق‌تره.

6. تفاوت با matrix3d()

• matrix() فقط برای 2D Transform هست (جابجایی، مقیاس، چرخش در محور Z).
• matrix3d() برای سه‌بعدی‌هاست و ۱۶ مقدار می‌گیره.

7. نکته مهم

معمولاً خودت مستقیم matrix نمی‌نویسی (چون سخت و گیج‌کننده‌ست).
مرورگر یا ابزارها خودشون محاسبه می‌کنن.
اما اگر بدونی چطور کار می‌کنه، می‌تونی راحت‌تر خروجی devtools یا ابزارهای گرافیکی رو بخونی و درک کنی.