إخفاء الوجه الخلفي عند القلب | التحويلات ثلاثية الأبعاد في لغة CSS

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

عندما تقلب عنصراً بزاوية نصف دورة rotateY(180deg)، تعرض القيمة الافتراضية backface-visibility: visible نسخة معكوسة كالمرآة من محتواه الأمامي. أما ضبط backface-visibility: hidden فيخفي ظهر العنصر تماماً فور التفاته بعيداً عن المشاهد، وهو الأساس العملي لبناء البطاقات التعليمية ذات الوجهين الأمامي والخلفي:

الصف 2 كود برمجي

CSS

.back-visible {
  transform: rotateY(180deg);
  backface-visibility: visible;
}
.back-hidden {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

جرّب بنفسك

الصف 3 ملاحظة هامة

الصف 4 ملاحظة هامة

Hiding Flipped Element Backface إخفاء الوجه الخلفي عند القلب

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (التحويلات ثلاثية الأبعاد في لغة CSS)