Website text to read vertically

Design help General
1

Hi Webflow,

I need help on some design for my site. Basically I want some of the text to read vertically, see the left and right hand text on this page http://www.goldmills.co.uk/

I used the rotate transformation of 90 degrees, but the issue I face is that it doesn’t ‘stick’ to the side of the page.

I hope there is simply a styling set-up I can add to a div block in which I can just drop the text in for it to read this way.

Let me know your thoughts.

Thank you

Here is my public share link: https://preview.webflow.com/preview/goldmills-marketing?preview=987b5d022e69bb76bb720e9cd52ad964

2

Hi @SetSocial,

You are right, you just have to change some styling settings.
When you apply rotation transform to some element, you can choose the center of rotating.

Imagine that rectangle with dots it is your object and every dot it is a possible centre of rotation. By default, it set to the exact center of the object. If you will change it to one of the corners, you will be able to “stick” 90deg rotated object to the side.

Hope I was able to explain.

Cheers,
Anna

1 Like
3

Hi.

When you use transform to rotate, the center of your element is still the center of your element, that’s why it get away from the border of the screen. Also it was there because it’s kind of it’s default, being on the left.

On your example site, they do exactly the same then manually move the text left:

left: -145px !important;

So the vertical lines of text in your example site are position:fixed then move manually. All of this you can do in Webflow.

http://vincent.polenordstudio.fr/snap/gggpl.jpg

But in your example site they could have done better, by setting the origin of the transform, a bit like this:

transform-origin: left top 0;

And since we have the 3D transform in Webflow, we can do that without custom code.

Set your -90° transform then set your element position like this:

http://vincent.polenordstudio.fr/snap/dzmur.jpg

You then get this:

http://vincent.polenordstudio.fr/snap/btsss.jpg

Click on the wheel

http://vincent.polenordstudio.fr/snap/4ss81.jpg

Set the origin in the corner

http://vincent.polenordstudio.fr/snap/4ub0y.jpg

You’re almost there

http://vincent.polenordstudio.fr/snap/wgqkf.jpg

Little adjustment to compensate for the fact by rotating an element around one corner can never position it the way you need it, and you’re good

http://vincent.polenordstudio.fr/snap/zi24e.jpg

2 Likes
4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.