всем привет!
есть такая задача, никак не могу решить..
Есть плоскость FRONT (вертикальная), есть плоскость BOTTOM (горизонтальная).
Плоскость BOTTOM повёрнута под 90 градусов к плоскости FRONT.
На плоскости BOTTOM есть дочерний элемент, который надо развернуть под 90 градусов к плоскости BOTTOM.
Применение transform: rotateX(90deg) к дочернему элементу дает его схлопывание в ноль.
Если я ставлю например rotateX(50deg) , то он как бы съёживается, но не поворачивается, как надо.
Вот рисунок

Вот код
https://codepen.io/mk3mk/pen/eYYMWXb
Какие есть варианты ?