CSS 2D Transforms

توی CSS می‌تونیم با خاصیت transform المان‌ها رو در ۲ بعد (X و Y) تغییر بدیم؛ مثل حرکت، چرخش، تغییر اندازه و کج کردن.

🔹 دستور کلی

selector { transform: function(value); }

📌 به جای function(value) یکی از توابع ترنسفورم قرار می‌گیره.

🔹 انواع 2D Transform

1. translate(x, y) → جابه‌جایی

المان رو در محور X و Y حرکت می‌ده.

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

✅ ۵۰px به راست و ۱۰۰px به پایین جابه‌جا می‌شه.

2. rotate(angle) → چرخش

المان رو حول مرکز خودش می‌چرخونه.

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

✅ المان ۴۵ درجه می‌چرخه.

3. scale(x, y) → تغییر اندازه

المان رو بزرگ‌تر یا کوچک‌تر می‌کنه.

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

✅ عرض ۱.۵ برابر و ارتفاع ۲ برابر می‌شه.

4. skew(x-angle, y-angle) → کج کردن

المان رو روی محور X و Y کج می‌کنه.

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

✅ ۲۰ درجه در X و ۱۰ درجه در Y کج می‌شه.

5. matrix(a, b, c, d, e, f) → ترکیب چند تغییر

یک ماتریس ۲ بعدی برای ترکیب translate, scale, skew و rotate.

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

📌 معمولاً کمتر مستقیم استفاده می‌شه (پیچیده است).

🔹 ترکیب چند transform

می‌تونی چندتا تابع رو پشت سر هم بنویسی:

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

🔹 تغییر نقطه مرجع (transform-origin)

به صورت پیش‌فرض، مرکز المان مبنای تغییراته. می‌تونی عوضش کنی:

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

✅ این بار از گوشه بالا-چپ می‌چرخه.

🔹 مثال کامل

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>CSS 2D Transform</title> <style> .box { width: 100px; height: 100px; background: coral; margin: 50px; transition: 0.5s; } .box:hover { transform: rotate(45deg) scale(1.3) translate(30px, 20px); } </style> </head> <body> <div class="box"></div> </body> </html>

✅ نتیجه: وقتی موس میره روی مربع، هم می‌چرخه، هم بزرگ می‌شه، هم جابه‌جا می‌شه.