داخل preserve-3d، لا يكفي z-index

في المشهد الافتتاحي لهذا الموقع، تحيط أربعة أسطح للمنتجات بعلامة ثلاثية الأبعاد. لكل سطح قيمة z-index خاصة به: ٣ و٤ و٥ و٦. لم تكن للعلامة قيمة. بدا منطقيًا أن تظهر البطاقات أمامها.

لكن أذرع العلامة كانت تخترق البطاقات وتقطع نصوصها.

#لماذا لم يحل z-index المشكلة

عندما يحمل العنصر الأب transform-style: preserve-3d، لا يعود الأبناء مكدسين على مستوى مسطح واحد. يضعهم المتصفح في فضاء ثلاثي الأبعاد ويسمح لهم بالتقاطع. رفع z-index لا يزيل هذا التقاطع الهندسي.

كانت علامتنا تدور ٢٢ درجة حول محور Y داخل صندوق عرضه ٤٨٠ بكسل:

480 / 2 × sin(22°) ≈ 90 pixels

أي أن أطرافها تتقدم نحو المشاهد بحوالي ٩٠ بكسل، بينما البطاقات عند z = 0. كان التقاطع حتميًا.

#ما لم ينجح

صغّرنا العلامة أولًا إلى ٧٦٪ من حجمها السابق. بقيت الأذرع تعبر بطاقتي الإيصال والوسائط. تقليل العرض لم يوفر فصلًا كافيًا في العمق.

#ما نجح

أبعدنا العلامة كاملة إلى الخلف، أكثر من امتداد أقرب أذرعها:

.x-depth {
  position: absolute;
  inset: 0;
  transform: translateZ(-160px) scale(1.145);
  transform-style: preserve-3d;
}

عامل التكبير ليس للزينة. منظور الأب 1100px، لذا يبدو العنصر المُبعَد ١٦٠ بكسل أصغر بنسبة 1100 / (1100 + 160). الضرب في المعكوس، 1260 / 1100 = 1.145، يعيد الحجم الظاهر.

وأخيرًا، وضعنا التحويل على غلاف منفصل. يحرّك GSAP العلامة نفسها ويفكك مصفوفة تحويلها الثلاثية الأبعاد. فصل إزاحة العمق يمنع هذا التفكيك من تغيير موضعها.