CSS3 Transform not rotating from center

Hey guys! Anyone care to tell me why this link doesn’t rotate from the center like the default specification states…. I’m stumped. FYI, Changing transform-origin has no effect either…. I’m simply trying to make the x rotate 90 degrees on hover and stay centered… Thanks!

As far as I can tell, it is rotating about the centre. The centre of the a element that is (as expected), not the centre of the “x” though.

You could have fixed it with a line-height of 25px to center the X.

Remember that text is placed on the baseline and not on the center so rotating the element rotates the text on its baseline which has room for descenders and ascenders (even if the glyphs have none). Set vertical-align to middle and adjust the line-height to centralise the item. Line-height:25px fixed it in your original demo.

Thanks guys, yes I realize that now that you explained it. Line-height was the missing factor. Thanks so much!

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