Как решить задачу с углами?

Привет всем.
Делаю что-то вроде приложения по созданию своих мобильных устройств (типа создай устройство своей мечты) https://madeas.github.io/box-shadows/device/ Добавил несколько различных функций для настройки, но не могу решить одну задачу - создание визуального объема. По клику на устройство или при помощи кнопки "Rotation Device" устройство начинается поворачиваться/вращаться, но в какой-то момент, при вращении, оно становится плоским. Боковые стенки я уже сделал на тестовом сайте, но не могу закруглить края в нужную сторону. Может быть, кто-то сможет решить или подскажет в какую сторону двигаться?
Вывел приблизительный код в песочницу https://jsfiddle.net/9zw6ckux/4/ , где уже есть боковые стороны, но они прямые. Как завернуть их верхний/нижний края? Сделал полноценный объемный блок, но в нем все стороны плоские. https://jsfiddle.net/yup0fxe7/2/ Возможно, это упростит задачу. Заранее спасибо.



P.S. Пока эта разработка только для развлечения, но в будущем может быть найдется более полезное применение. Если у кого-то есть идеи по улучшению визуализации устройства или добавление других функций, пишите ниже. Список изменений и функциональные возможности здесь.