دگرگونی سایت با CSS: چرخش، تغییر اندازه و جابجایی

CSS Transforms: جابجایی، چرخش، تغییر اندازه و کج کردن عناصر! 🤸‍♀️

سلام دوستان! تا اینجا با انیمیشن‌های نرم و پیوسته (Transitions) آشنا شدیم. اما گاهی وقت‌ها نیاز داریم که عناصر HTML رو جابجا کنیم، بچرخونیم، اندازه‌شون رو عوض کنیم یا حتی کج و معوجشون کنیم! اینجاست که جادوی CSS Transforms وارد می‌شه. این قابلیت به ما اجازه می‌ده که عناصر رو در دو بعد (2D) و حتی سه بعد (3D) دستکاری کنیم و جلوه‌های بصری خیلی خلاقانه بسازیم. آماده‌اید که عناصر رو به بازی بگیریم؟ 😉

1. معرفی CSS Transforms: جعبه ابزار جادویی! 🔧

CSS Transforms به ما اجازه می‌ده که یه عنصر رو بدون اینکه چیدمان (Layout) صفحه رو تحت تأثیر قرار بده، تغییر شکل بدیم. یعنی این تغییرات در خود عنصر اعمال می‌شن و باعث نمی‌شن عناصر دیگه جابجا بشن.

چند تا از مهم‌ترین توابع Transform که باهاشون کار داریم:

• translate(): جابجایی عنصر
• rotate(): چرخاندن عنصر
• scale(): تغییر اندازه عنصر
• skew(): کج کردن عنصر
• matrix(): برای اعمال همه تبدیل‌ها در یک تابع (پیشرفته)

این توابع رو معمولاً در کنار Transitionها یا Animationها استفاده می‌کنیم تا حرکت‌های پویا و جذابی بسازیم.

2. Translate: جابجایی دقیق! 📍

با translate() می‌تونیم عنصر رو در محور X (افقی) و Y (عمودی) جابجا کنیم.

• translate(x, y): جابجایی به اندازه x پیکسل در محور X و y پیکسل در محور Y.
• translateX(x): فقط جابجایی در محور X.
• translateY(y): فقط جابجایی در محور Y.

.box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  transition: transform 0.5s ease; /* برای حرکت نرم */
}

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

مقدار مثبت برای X به معنی جابجایی به راست و برای Y به معنی جابجایی به پایینه.

3. Rotate: چرخش دلخواه! 🔄

با rotate() می‌تونیم عنصر رو حول یه نقطه بچرخونیم.

• rotate(angle): چرخش به اندازه angle درجه (deg).

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  transition: transform 0.5s ease;
}

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

.box:active { /* وقتی کلیک می‌کنیم */
  /* چرخش 90 درجه در خلاف جهت عقربه‌های ساعت */
  transform: rotate(-90deg);
}

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

4. Scale: تغییر اندازه! ⬆️⬇️

با scale() می‌تونیم اندازه عنصر رو بزرگتر یا کوچکتر کنیم.

• scale(x, y): مقیاس‌بندی به اندازه x در محور X و y در محور Y.
• scaleX(x): فقط مقیاس‌بندی در محور X.
• scaleY(y): فقط مقیاس‌بندی در محور Y.

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  transition: transform 0.5s ease;
}

.box:hover {
  /* بزرگ کردن دو برابر در هر دو محور */
  transform: scale(2, 2); /* یا scale(2) */
}

مقدار 1 یعنی اندازه اصلی. مقادیر بزرگتر از 1 باعث بزرگ شدن و مقادیر کوچکتر از 1 (بین 0 و 1) باعث کوچکتر شدن می‌شن.

5. Skew: کج کردن و اریب کردن! 📐

با skew() می‌تونیم عنصر رو در امتداد محورهای X و Y کج کنیم.

• skew(x-angle, y-angle): کج کردن به اندازه x-angle درجه در محور X و y-angle درجه در محور Y.
• skewX(x-angle): فقط کج کردن در محور X.
• skewY(y-angle): فقط کج کردن در محور Y.

.box {
  width: 100px;
  height: 100px;
  background-color: gold;
  transition: transform 0.5s ease;
}

.box:hover {
  /* کج کردن 15 درجه در محور X */
  transform: skewX(15deg);
}

.box:active {
  /* کج کردن 10 درجه در محور Y */
  transform: skewY(10deg);
}

6. Transform Origin: مرکز ثقل تبدیل! 🧭

به طور پیش‌فرض، اکثر تبدیل‌ها (مثل rotate و scale) از مرکز عنصر (50% 50%) اعمال می‌شن. با استفاده از transform-origin می‌تونیم این نقطه مرکزی رو تغییر بدیم.

• transform-origin: center; (پیش‌فرض)
• transform-origin: top left; (بالا و چپ)
• transform-origin: 20px 30px; (با مقادیر دلخواه)

.box {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
  transition: transform 0.5s ease;
  transform-origin: top left; /* چرخش از گوشه بالا چپ */
}

.box:hover {
  transform: rotate(90deg);
}

7. Transforms 3D: بعد سوم! 🌌

CSS Transforms قابلیت‌های 3D شگفت‌انگیزی هم داره! برای اینکه بتونیم تبدیل‌های 3D رو ببینیم، نیاز داریم که عنصر والد یه perspective داشته باشه.

• perspective: روی عنصر والد اعمال می‌شه و میزان “عمق” صحنه رو مشخص می‌کنه. مقادیر کمتر، پرسپکتیو قوی‌تری دارن.
• translateZ(z): جابجایی در محور Z (به سمت جلو یا عقب).
• rotateX(angle): چرخش حول محور X.
• rotateY(angle): چرخش حول محور Y.
• rotateZ(angle): همون rotate(angle) هست ولی صراحتاً در محور Z.
• scale3d(x, y, z), translate3d(x, y, z), rotate3d(x, y, z, angle) و …

.scene {
  width: 300px;
  height: 200px;
  perspective: 500px; /* زاویه دید 3 بعدی */
  border: 1px solid #ccc;
  margin: 50px auto;
}

.box-3d {
  width: 100px;
  height: 100px;
  background-color: rgba(255, 100, 100, 0.8); /* از rgba برای شفافیت استفاده کردیم */
  transition: transform 1s ease;
  transform-origin: center center;
}

.scene:hover .box-3d {
  /* چرخش حول محور Y، مثل وقتی یه کارت رو از جلو می‌بینیم و کج می‌شه */
  transform: rotateY(60deg) scale(1.1);
}

Transformها در ترکیب با Transitionها یا Animationها، جلوه‌های بصری فوق‌العاده‌ای رو خلق می‌کنن. می‌تونید دکمه‌هایی بسازید که وقتی روشون هاور می‌شه، انگار از صفحه بیرون میان، یا کارت‌هایی که وقتی می‌چرخن، اطلاعات دیگه‌ای نشون می‌دن.

CSS Transforms جعبه ابزار شما برای افزودن پویایی و جذابیت به وب‌سایت هست. با این توابع می‌تونید عناصر رو جابجا، چرخش، تغییر اندازه و حتی کج کنید. امتحان کردن ترکیب‌های مختلف و استفاده از اون‌ها با Transitionها، بهترین راه برای یادگیری و خلق افکت‌های خیره‌کننده است. خلاق باشید! 🎨