Transforming a Cylinder created using CSS3DRenderer to 2D view

Hello,

I have a Cylinder rendered using CSS3DRenderer where each face has some html content, and has its own position and rotation, as shown here:

I want when clicking some button to transform it to 2D view if it is 3D and vise versa. Where in 2D view, the faces are flat and next to each other, and maintaining the original width of the faces. Note here that, the width of the screen might not fit all the faces, so a horizontal scroll should appear. And most importantly, the transformation must happen in a smooth way (I am using tween.js for this).

I tried changing the position and rotation of the faces using tween.js, the faces are taking the right places but the scroll is wrong (some faces in the end are being trimmed)

Any ideas?

Thank you.