**دوال Transform ثلاثية الأبعاد:** - `translateZ()` / `translate3d(x, y, z)` — تحريك في المحور Z - `rotateX() / rotateY() / rotateZ()` — دوران حول المحاور - `rotate3d(x, y, z, angle)` — دوران حول محور مخصص - `scaleZ() / scale3d()` - `perspective()` — كدالة داخل transform
**perspective:** تُضيف منظوراً ثلاثي الأبعاد. يمكن تعريفها: 1. على الأب: `perspective: 1000px` — تأثير مشترك لكل الأبناء. 2. كدالة في transform: `transform: perspective(500px) rotateY(30deg);`
قيمة صغيرة (300px) = منظور قريب جداً، تأثير مبالغ. قيمة كبيرة (2000px) = منظور بعيد، تأثير خفيف.
**transform-style: preserve-3d:** يجعل الأبناء يشاركون في فضاء الـ 3D من الأب.
**backface-visibility:** - `visible` — الجهة الخلفية مرئية عند قلب العنصر (الافتراضي) - `hidden` — الجهة الخلفية مخفية (ضروري لبطاقات الـ flip)
| 1 | /* بطاقة تنقلب */ |
| 2 | .card-flip { perspective: 800px; } |
| 3 | .card-inner { |
| 4 | transform-style: preserve-3d; |
| 5 | transition: transform 0.6s ease; |
| 6 | } |
| 7 | .card-flip:hover .card-inner { transform: rotateY(180deg); } |
| 8 | .card-front, .card-back { backface-visibility: hidden; } |
| 9 | .card-back { transform: rotateY(180deg); } |
مثال 1: بطاقة Flip Card كاملة
| 1 | .flip-container { |
| 2 | perspective: 1000px; |
| 3 | width: 280px; |
| 4 | height: 380px; |
| 5 | } |
| 6 | |
| 7 | .flip-card { |
| 8 | position: relative; |
| 9 | width: 100%; height: 100%; |
| 10 | transform-style: preserve-3d; |
| 11 | transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); |
| 12 | } |
| 13 | |
| 14 | .flip-container:hover .flip-card { |
| 15 | transform: rotateY(180deg); |
| 16 | } |
| 17 | |
| 18 | .flip-front, |
| 19 | .flip-back { |
| 20 | position: absolute; |
| 21 | inset: 0; |
| 22 | border-radius: 16px; |
| 23 | backface-visibility: hidden; |
| 24 | } |
| 25 | |
| 26 | .flip-front { background: #3b82f6; color: white; } |
| 27 | .flip-back { |
| 28 | background: #1e293b; |
| 29 | color: white; |
| 30 | transform: rotateY(180deg); |
| 31 | } |