شرح صفوف ومحتوى الفقرة
تطبّق المتصفحات افتراضياً القيمة transform-style: flat على أي عنصر أب خاضع للتحويل، مما يسطّح جميع عناصره الأبناء ويلصقهم بمستوى سطحه الواحد. وعند بناء بطاقات متعددة الطبقات أو مجسمات مركبة، اضبط transform-style: preserve-3d على الحاوية الدوارة ليحتفظ أبناؤها المباشرون بمواضعهم المستقلة في العمق عبر translateZ(z):
CSS
.stage {
perspective: 700px;
}
.card-wrap {
transform-style: preserve-3d;
transform: rotateY(-28deg);
}
.badge-pop {
transform: translateZ(36px);
}