3

I am trying to to overlay some rotated text over my images but I am having some difficulty with it. Here is my code without all the jQuery: http://jsfiddle.net/vCbcz/4/

Issues:

  • The span does not align with the div after the rotation
  • The background transparency isn't showing up in Internet Explorer even though the span is positioned and I have added filter: alpha(opacity = 30); to my css.

EDIT: I would like the spans to look like http://jsfiddle.net/vCbcz/6/ except with rotated text. Please don't tell me to put the text in a seperate container.

Yi Jiang
  • 49,435
  • 16
  • 136
  • 136
LostLin
  • 7,762
  • 12
  • 51
  • 73
  • I'm not sure I understand what you mean by "the span does not align with the div after the rotation'... Can you include a link to an image of what it should look like? – Brian Flanagan Mar 17 '11 at 20:06
  • Yeah, I think you'll need to put the text in another container. You're rotating the container so it makes sense that the text in the container would rotate as well... – Brian Flanagan Mar 17 '11 at 20:12
  • I want the text to be rotated. But the span gets moved over to the right after the rotation. I want the black background part to still be in the position as shown in the edit – LostLin Mar 17 '11 at 20:21
  • This may help: http://stackoverflow.com/questions/4443750/webkit-transforms-how-to-roate-on-z-axis-but-not-around-center – Brian Flanagan Mar 17 '11 at 20:27
  • The CSS rotation applies rotation around the center of an element _after_ it has been laid out. So you need to make sure the span is positioned with its center at the center of rotation prior to being rotated – Eric Mar 17 '11 at 21:10

1 Answers1

2

Setting left:-25px; on the spans fixes it for me in Firefox. See here.

Edit
With regards to IE, the reason your alpha filter isn't being applied is because your second filter: is overwriting your first. If you want them to both be applied, you put them in the same filter: separated by a space like so:
filter: alpha(opacity = 30) progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

I noticed that in IE the left:-25px; makes it worse so perhaps you'll have to do some conditional comments or CSS hacks to get around it. (Icky!)

Just a warning, this doesn't work in Opera at all.

Edit 2
Here's my changes with fixing IE's bugs and supporting Opera and possibly other browsers if they support the CSS3 transform property.

Richard Marskell - Drackir
  • 13,080
  • 3
  • 33
  • 54