🧩 پراپرتی‌های مهم 3D Transform

1. transform-origin

• محل مبدا (نقطه‌ی محور چرخش یا تغییر شکل) را مشخص می‌کند.
• مقدار پیش‌فرض: center center

مثال:

transform-origin: top right;

🟢 چرخش از گوشه بالا و راست انجام می‌شود.

2. perspective

• فاصله دید بین کاربر و صفحه سه‌بعدی را مشخص می‌کند (عمق میدان).
• هر چه مقدار کمتر باشد، عمق و زاویه دید بیشتر می‌شود.

مثال:

perspective: 200px;

🟢 با کاهش عدد، جسم بیشتر به سمت بیننده خم می‌شود.

3. perspective-origin

• تعیین نقطه‌ای که از آن زاویه دید سه‌بعدی اعمال می‌شود.
• پیش‌فرض: 50% 50% (وسط صفحه)

مثال:

perspective-origin: bottom left;

🟢 زاویه دید از گوشه پایین چپ اعمال می‌شود.

4. transform-style

• مشخص می‌کند که آیا عناصر فرزند نیز در فضای سه‌بعدی حفظ شوند یا نه.

مقادیر:

transform-style: flat;/* پیش‌فرض، سه‌بعدی غیرفعال */
 transform-style: preserve-3d; /* حفظ فضای سه‌بعدی برای فرزندان */ 

5. backface-visibility

• مشخص می‌کند که پشت عنصر هنگام چرخش قابل مشاهده باشد یا خیر.

مقادیر:

backface-visibility: visible; /* پشت دیده می‌شود 
*/ backface-visibility: hidden;  /* پشت پنهان می‌شود */ 

⚠️ نکات پایانی

• برای اعمال 3D Transform باید perspective تعریف شود.
• در چرخش کارت‌ها حتماً از transform-style: preserve-3d استفاده کنید.
• backface-visibility برای مخفی کردن پشت عنصر ضروری است.