Rotate text link 90% to be vertical

[Karen]

Here is the read-only ink: https://preview.webflow.com/preview/petrichor1?preview=64e0ec032355e88df9e3721e80fd8bbc

I wish to make rotate some text links 90 degrees, like in the image below. This will be main navigation and it will be fixed.

But the rotate on Z function seems to mess up my responsive layout. The positioning gets funky.

I would like to create basically a div that is rotated -90 at 90% from the left side of the browser window. And then create text links within this rotated div box.

When I add padding to the individual text links within the div box, it creates padding all over, not just at the side I wish, so the 90% away from left browser increases.

I’d really appreciate it if you can take a look and let me know what I am doing wrong.

Thank you so much!

[nshkrsh (Nishkarsh Kankaria)]

hi Karen.

to rotate text by 90 degrees, do as follows:

1. select your text element
2. in Styles pane, scroll down to ‘Transitions & Transforms’
3. click on add Transform (+)
4. set ‘Rotate’ ‘z’ by 90 or 270 depending on what direction you want.

this works fine on other responsive screens as well.

[Karen]

Thank you Nshkrsh!

However, it seems to rotate it by the center origin point, whereas I need it to rotate by the top left point of the textbox / div…is there a way to change the rotation point?

Thank you!

[sabanna (Anna)]

Hello, @Karen

You can change this setting under the Transforms:

Click on the dot, for choose center of the rotation.

Hope it helps,

Cheers,
Anna