Rotated component

Hi all,
i am trying to create something like HorizontalAccordion. For this I need VerticalButton (div, button, or anchor rotated by -90 degrees).

I created css class:
.box_rotate {
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome /
-moz-transform: rotate(-90deg); /
FF3.5+ /
-ms-transform: rotate(-90deg); /
IE9 /
-o-transform: rotate(-90deg); /
Opera 10.5 */
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
zoom: 1;}

I apllied it using:

The result is that buttons are wrapped by divs having original buttons sizes (before rotation) and so I can see just small square clips of buttons and spaces between them.

Can anyone help?

Thank you

Vaadin compute all sizes on the server side and as far as I am aware it doesn’t know anything about CSS transforms.
You may try wrapping your component in a CSSLayout or a SimpleLayout (from the directory) to see if they can handle that in a better way, but I am doubtful.

Otherwise you will have to digg in the code of the accordion and make a new component out of it which might not be easy.