How to rotate the text vertically using Transforms?

How to position the text vertically?

Hi, apply a transform, rotation on the Z axis, of -90°

http://vincent.polenordstudio.fr/snap/xdf56.png


http://vincent.polenordstudio.fr/snap/2u4wr.jpg


http://vincent.polenordstudio.fr/snap/mdlmz.png

1 Like

Works with Text and Headers…
but doesn’t seem to work with Links.

How do you control the width of the text.

Whenever I change the Width or Height…
it just makes matters worse.

1 Like

Nest it in a div

Worse than what?

Thanks @vincent. Placing the link inside a div does allows the transform.

when you try to better place a transformed / rotated element - positioning the element becomes a complicated issue.

CSS is sometimes screwy… but I must be doing something wrong / missing something.

I’m trying to get the title centered vertically (remember the text is rotated) and positioned under the 4 icons… which are in their own div.

Basically the left side is a div with 2 child divs. Top div has the icons. Bottom div has the rotated text.

Video:
http://quick.as/2keoTpq10

There are things difficult to achieve without having to move the element i place afterwards using Position.

But most of the cases can be achieve with Transform only. You have to use the Origin dialog thatwas introduced with 3D transforms, that’s an essential part of the toolbox.

I don’t fully understand the shifting to the right you get in your video. But maybe it hs to do with this origin positionning, look:

1 Like

Considering the impossibilities with only rotating:

For example, those positions are possible (gray ghost)

http://vincent.polenordstudio.fr/snap/53u9f.jpg

But if you want to keep the same lower left origin, a rotation can’t do it:

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

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