Rotated button in Perspective?

How can I rotate text and icon in a button? I can rotate text (sort of) with a CSS transform, but:

  1. this only rotates the text, the icon doesn’t come with it (icon stays where it was)
  2. bounds still use the width of the button, e.g. if the width of the button doesn’t support the length of the text, it will line-wrap, despite the height of the button fully supporting the length of the text when rotated.

Rotated text:

Setting the icon to display at the bottom kind of works, but I still can’t get it rotated…

I ended up just making my own button using a flex container with an icon and label within it.

Just wondering, how did you rotate the label?

Add these styles:
writingMode: vertical-rl
transform: scale(-1,-1)

You can’t use rotate in a flex container, well you can, but have fun :wink:

but still the same, add a coordinate container to the flex container and then add the button on the coordinate.
Rotate and play with the binding and widths and heights to make sure that the button uses all available space in the container.

1 Like

That’ll work too, many ways to do things in Ignition!