جاري التحميل...

التحويلات ثلاثية الأبعاد في CSS

الحصة السابقة ضبطت المؤشر والـ caret وجلد الويدجت الأصلي. هذه آخر حصة اختيارية مختلفة: تحويلات ثلاثية الأبعاد. تعطي البطاقة نقطة تلاشٍ وتُميلها في العمق. لا تعيد درس هوفر translate وscale ثنائي الأبعاد، ولا تختار cursor أو مقبض resize.

الجواب المباشر

التحويلات ثلاثية الأبعاد في CSS هي خاصية transform نفسها مع عمق. ضع perspective على الأب ليشترك الأبناء في نقطة تلاشٍ (perspective-origin يحرّك تلك النقطة). rotateX وrotateY يميلان حول المحورين الأفقي والعمودي؛ rotateZ هو الدوران المسطح الذي تعرفه. translateZ يقترب من الناظر أو يبتعد. transform-style: preserve-3d يُبقي الأبناء في مشهد واحد بدل تسطيحهم. backface-visibility: hidden يخفي الوجه حين يبتعد — مفيد لبطاقة بوجهين. خانة التخطيط تبقى كما في الثنائي. أبقِ الزوايا صغيرة. احترم prefers-reduced-motion.

لماذا ليست حركة ثنائية ولا واجهة

درس التحويل الثنائي علّم الحركة على المستوى: translate وrotate وscale وskew ومفصلة transform-origin. ما زالت تعمل. الثلاثي يضيف perspective يشبه الكاميرا ومحاور إضافية. واجهة المستخدم كانت جلد التفاعل (cursor، resize، caret-color، appearance). البطاقة المائلة لا تحتاج يداً كاذبة، ومقبض textarea ليس نقطة تلاشٍ. إن أردت رفعاً ببكسلين، ابقَ في الثنائي.

perspective — ضع الكاميرا على الأب

perspective طول: القيم الأصغر أقرب وأحدّ؛ الأكبر أسطح. ضعها على المشهد لا على كل وجه، ليشترك الأشقاء في نقطة تلاشٍ واحدة.

Perspective on the parent

css

.stage {
perspective: 800px;
perspective-origin: 50% 40%;
}

.card-3d {
transform: rotateY(18deg);
transform-origin: center;
}

يمكنك أيضاً كتابة transform: perspective(800px) rotateY(18deg) على عنصر واحد. تلك الكاميرا لذلك الصندوق فقط. للمكعب أو صف البلاطات، perspective الأب أهدأ. perspective-origin ابن عم نقطة التلاشي لـtransform-origin — لا يستبدل أصل الوجه الدوّار.

المحاور — rotateX وrotateY وrotateZ

تخيّل كتاباً. rotateY يفتح الغلاف يميناً ويساراً. rotateX يومئ به نحوك أو بعيداً. rotateZ يدوّره على الصفحة — rotate() الثنائي الذي تعرفه.

rotateX rotateY rotateZ

css

.tile-y {
transform: rotateY(-22deg);
}

.tile-x {
transform: rotateX(12deg);
}

.tile-z {
transform: rotateZ(8deg);
}

اربط مع دوال ثنائية عند الحاجة: rotateY(16deg) translateZ(24px). الترتيب مهم — اللاحق يعمل في الفضاء المحلي للسابق. قائمة transform واحدة تكفي كدرس الثنائي. rotateX(80deg) على مقال كامل مهرجان لا واجهة.

translateZ — مسافة لا دفع تخطيط

مع perspective، translateZ الموجب غالباً يأتي نحو الناظر. الجيران في المستند لا يفسحون؛ الرسم وحده يتحرك كـtranslate الثنائي.

translateZ in a 3D scene

css

.stage {
perspective: 900px;
}

.pop-face {
transform: translateZ(40px) rotateY(-8deg);
}

.back-face {
transform: translateZ(-28px);
}

استخدم translateZ لفصل وجوه مشهد، لا لمحاكاة margin أو z-index العادي. z-index ما زال يرتّب الصناديق المتداخلة في تخطيط ثنائي؛ مسافة الثلاثي مقبض آخر. إن كانت المهمة «ارفع الشريحة بكسلين»، translateY من درس الثنائي يكفي.

preserve-3d — ابقِ المشهد ولا تسطّح

افتراضياً يُسطّح الأب الأبناء المحوّلين (transform-style: flat). تضيع علاقة العمق. للمكعب أو الغلاف المكدّس أو بطاقة بوجهين، ضع preserve-3d على الغلاف الدوّار.

preserve-3d on the scene

css

.scene {
perspective: 700px;
}

.rig {
transform-style: preserve-3d;
transition: transform 0.45s ease;
}

.rig.is-flipped {
transform: rotateY(180deg);
}

.face {
position: absolute;
inset: 0;
backface-visibility: hidden;
}

كل سلف يجب أن يحفظ العمق يحتاج preserve-3d — أب flat منسي يطبع المكعب ملصقاً. شائع: perspective على المسرح الخارجي وpreserve-3d على الهيكل الداخلي: كاميرا خارجاً، مفاصل داخلاً.

backface-visibility — أخفِ الوجه الخلفي

حين يتجاوز الوجه 90° ترى صورته المعكوسة. backface-visibility: hidden يسقط ذلك الخلف. زاوج وجهين: الأمام rotateY(0) والخلف rotateY(180deg) وكلاهما position: absolute على الهيكل نفسه.

Card flip with backface-visibility

css

.card-rig {
position: relative;
transform-style: preserve-3d;
}

.card-front,
.card-back {
position: absolute;
inset: 0;
backface-visibility: hidden;
}

.card-back {
transform: rotateY(180deg);
}

بدون ظهور مخفي يظهر شبح الأمام. هذا ليس user-select: none ولا appearance: none. تخفي وجهاً مرسوماً في الثلاثي، لا تنزع جلد خانة اختيار.

ثلاثي مقابل تحويل ثنائي مقابل جلد الواجهة

📊 3D vs 2D transform vs UI chrome

Tool	Job	Poor fit
`perspective` + `rotateX` / `rotateY` / `translateZ`	مشهد عمق: ميل، مسافة، نقطة تلاشٍ مشتركة	رفع هوفر ببكسلين؛ شكل المؤشر
2D `translate` / `rotate` / `scale` / `skew`	حركة على المستوى؛ مفصلة الأصل	بناء مكعب بلا preserve-3d
`transform-style` / `backface-visibility`	وجوه ثلاثية متداخلة؛ إخفاء الجانب المعكوس	لون الـ caret؛ resize لحقل
UI (`cursor`، `resize`، `appearance`…)	جلد تفاعل على التحكم	نقاط تلاشٍ؛ قلب بطاقة

Optional Advanced سبق وصبغ التحكم. Effects & Motion علّم الإسقاط الثنائي. هذه الحصة طبقة العمق على transform. cursor: pointer على عنوان لأن فيه rotateY لا يجعله ثلاثياً. perspective على نموذج دخول لا يغني عن resize لحقل ملاحظات.

عادات هادئة

أبقِ perspective لمئات البكسل لبطاقات الواجهة (نطاق معقول 600px–1200px). لا تضع perspective: 40px على body. اقرن :hover أو صنفاً بـtransition قصير على transform — نفس عادة الثنائي. أغلق الزخرفة بـprefers-reduced-motion: reduce (none أو نكزة ثنائية صغيرة). تركيز لوحة المفاتيح ما زال يحتاج حلقة ظاهرة؛ القلب ليس نمط تركيز.

Modest 3D hover not a 2D lift

css

.preview {
perspective: 1000px;
}

.preview .plate {
transition: transform 0.3s ease;
}

.preview:hover .plate {
transform: rotateY(-10deg) rotateX(4deg);
}

@media (prefers-reduced-motion: reduce) {
.preview .plate,
.preview:hover .plate {
transition: none;
transform: none;
}
}

هذا الهوفر ميل لا رفع شريحة بـtranslateY(-0.15rem) الثنائي ولا resize: vertical على حقل. إن فضّل مستخدم تقليل الحركة بطاقة ثابتة، صدّقه.

جرّبها بنفسك

لف بطاقة في .stage { perspective: 800px; } وضع rotateY(20deg) على الابن — ثم انقل perspective إلى transform الابن وقارن البلاطات الشقيقة.
ابنِ بطاقة بوجهين: preserve-3d على الهيكل، backface-visibility: hidden على الوجهين، الخلف rotateY(180deg).
أضف translateZ(32px) على المستوى الأمامي؛ تأكد أن جيران التخطيط لا يتحركون.
اقلب بصنف وtransition: transform — ثم سطّح بـprefers-reduced-motion.
لا تحلّ هذا بـcursor أو resize أو هوفر translateY ثنائي فقط.

أخطاء شائعة

perspective: 50px على body فيلتوي الصفحة كلها
نسيان preserve-3d على الغلاف ثم الحيرة لمكعب مسطح
اعتبار رفع الشريحة الثنائي (translateY) درساً ثلاثياً
استخدام جلد الواجهة (cursor، resize، appearance) بدل العمق
backface-visibility على المسرح بدل الوجوه
تجاهل prefers-reduced-motion على قلب rotateY كبير
توقع أن الثلاثي يغيّر تدفق المستند مثل margin

ملخص

التحويلات ثلاثية الأبعاد تضيف عمقاً لـtransform: perspective وrotateX / rotateY وtranslateZ
ضع perspective على مشهد الأب؛ استخدم preserve-3d ليبقى الوجوه المتداخلة في ذلك الفضاء
backface-visibility: hidden يخفي وجهاً ابتعد
ليست درس هوفر ثنائي وليست جلد واجهة المستخدم
أبقِ الزوايا صغيرة؛ احترم تقليل الحركة
هذه آخر حصة CSS في هذا المسار — Optional Advanced ينتهي هنا؛ لا slug CSS إضافي في الخريطة

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة