Streaming live at 10am (PST)

How to rotate the text vertically using Transforms?


#1

How to position the text vertically?


#2

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




#3

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.


#4

Nest it in a div

Worse than what?


#5

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


#6

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:


#7

Considering the impossibilities with only rotating:

For example, those positions are possible (gray ghost)

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


#8

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