Rotating h2 text?

[drone4four]

I’ve got a reduced test case here: http://codepen.io/Angeles4four/pen/XpomxV

I’m trying to align the text in the h2 element (“Animals”) to be positioned on a -45degree angle on the outside of the top left corner of the table.

I’m clearly doing something wrong. Can anyone here please kindly lend a helping hand?

(And please pardon the cryptic table elements. I am using them in my live environment.)

[drone4four]

btw, this was Chris’ guide which I used for reference: https://css-tricks.com/snippets/css/text-rotation/

[Shikkediel]

The default value of transform-origin is 50% 50%, making it rotate around the center. Give this a try:

transform-origin: 0 0;

[chriswiley]

I think you want to add

display: inline-block;
transform-origin: 0 0;

for the H2. Because it is normally a block level element which spans the whole length of the container and the transform rotates from the center. Setting the display to inline-block will make the center in the middle of the world. Then you can set the transform-origin: 0 0; and that will do what you need it to do.

[drone4four]

Thank you all for your help.

According to Chris Coyier’s transfor-origin guide here, using the ‘top left’ values work just as well as ‘0 0’.

Now the desired effect that I am trying to achieve is to have the “m” in my “Animal” h2 heading swivel on the axis as pointed out with the red “X” set out here.

So I looked up Chris’ guide on positioning and tried playing around with float and positioning properties, like static, relative and absolute. No dice. Here is my latest experimentation in my testcase.

Thanks again for your attention.

[Paulie_D]

So like like this?

http://codepen.io/Paulie-D/pen/VPRQda

[drone4four]

@Paulie_D, yes, thanks. That helps very much. =D

[Author]

Posts