CSS 3D Transforms

با کمک transform در CSS می‌تونیم المان‌ها رو توی فضای سه‌بعدی (X, Y, Z) تغییر بدیم:

  • جابه‌جایی

  • چرخش

  • بزرگ/کوچک کردن

  • ترکیب چند افکت

🔹 پیش‌نیاز

برای دیدن تغییرات سه‌بعدی باید perspective داشته باشیم.

استفاده روی والد:

.container {
  perspective: 600px;
}

استفاده مستقیم روی المان:

.box {
  transform: perspective(600px) rotateY(45deg);
}

🔹 توابع مهم 3D Transform

1. translate3d(x, y, z)

جابجایی در سه محور.

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

✅ ۱۰۰px راست، ۵۰px پایین، ۲۰۰px به جلو.

2. translateZ(z)

جابجایی فقط در محور Z (به جلو/عقب).

.box {
  transform: translateZ(150px);
}

3. rotateX(angle)

چرخش حول محور X.

.box {
  transform: rotateX(60deg);
}

✅ المان حول محور افقی می‌چرخه.

4. rotateY(angle)

چرخش حول محور Y.

.box {
  transform: rotateY(60deg);
}

✅ المان مثل ورق کاغذ از طرفین می‌چرخه.

5. rotateZ(angle)

چرخش حول محور Z (مثل 2D).

.box {
  transform: rotateZ(60deg);
}

6. rotate3d(x, y, z, angle)

چرخش حول محور دلخواه.

.box {
  transform: rotate3d(1, 1, 0, 60deg);
}

✅ یعنی حول محوری که ترکیبی از X و Y هست.

7. scale3d(x, y, z)

بزرگ یا کوچک کردن در سه محور.

.box {
  transform: scale3d(1.5, 1, 0.5);
}

🔹 خاصیت transform-style

برای نگه داشتن حالت 3D در عناصر تو در تو:

.container {
  perspective: 600px;
  transform-style: preserve-3d;
}

🔹 خاصیت backface-visibility

کنترل می‌کنه وقتی پشت المان به سمت ماست، نمایش داده بشه یا نه.

.box {
  backface-visibility: hidden;
}

🔹 مثال کاربردی (چرخش کارت سه‌بعدی)

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <title>CSS 3D Transform</title>
  <style>
    .scene {
      perspective: 800px;
      width: 200px;
      height: 200px;
    }
    .card {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 1s;
    }
    .card:hover {
      transform: rotateY(180deg);
    }
    .face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;
    }
    .front {
      background: coral;
    }
    .back {
      background: teal;
      transform: rotateY(180deg);
    }
  </style>
</head>
<body>
  <div class="scene">
    <div class="card">
      <div class="face front">Front</div>
      <div class="face back">Back</div>
    </div>
  </div>
</body>
</html>

✅ نتیجه: یه کارت می‌سازی که با هاور شدن برمی‌گرده و پشت کارت دیده می‌شه.