Элемент преобразования внутри макета сетки не работает CSS ⇐ CSS

[Гость]

Ниже приведен мой код HTML и CSS. Я не знаю, почему преобразование внутри селектора «section > .back» не работает. Я думаю, что это могло быть из-за сетки или абсолютного положения, но я не смог решить проблему.

--cube-length: 300 пикселей --cube-half-length: 150 пикселей --cube-pieces-length: 100 пикселей

Это не работает:

#perspective { дисплей: сетка; места-предметы: центр; стиль преобразования: сохранение-3d; перспектива: 800 пикселей; положение: относительное; ширина: 100%; } #перспектива > div { высота: var(--cube-length); ширина: var(--cube-length); позиция: абсолютная; непрозрачность: 0,5; } #perspective > .front { дисплей: сетка; столбцы-шаблона сетки: повторение (3, 1fr); строки-шаблона сетки: повторение (3, 1fr); области шаблонов сетки: "вверху слева вверху по центру вверху справа" «средний левый средний центральный средний правый» "нижний левый нижний центр нижний правый"; } #perspective > .front { Transform: TranslateZ(var(--cube-half-length)); цвет фона: синий; } раздел { высота: 100%; ширина: 100%; область сетки: вверху слева; положение: относительное; стиль преобразования: сохранение-3d; } раздел > div { позиция: абсолютная; высота: 100%; ширина: 100%; } раздел > .back { Transform: TranslateZ(calc(var(--cube-pieces-length)*-2)); цвет фона: rgb(255, 0, 0);