How to solve the problem with corners?

Question

css

Hi all.
I'm doing something like an application to create my own mobile devices (like create the device of your dreams) https://madeas.github.io/box-shadows/device/ Added several different functions for customization, but I can not solve one task - creating a visual volume. By clicking on the device or using the "Rotation Device" button, the device starts to rotate / rotate, but at some point, during rotation, it becomes flat. I already made the side walls on the test site, but I can not round the edges in the right direction. Maybe someone will be able to decide or tell me which way to go?
Dumped the approximate code into the sandbox https://jsfiddle.net/9zw6ckux/4/where there are already sides, but they are straight. How to wrap their top/bottom edges? I made a full-fledged three-dimensional block, but in it all sides are flat. https://jsfiddle.net/yup0fxe7/2/ Maybe this will make things easier. Thanks in advance.

PS So far, this development is just for fun, but in the future there may be more useful applications. If anyone has any ideas to improve the visualization of the device or add other features, write below. The list of changes and functionality is here .

Answer 1

Move towards canvas and threejs