1

I am using the CSS3 Skew transform to create hotspots that fit to specific shapes and when the shape is hovered over with a mouse, text appears over the shape.

I can't seem to figure out why the font-size of the text is dependent on the Skew and Size of the hotspot, even when the font-size is defined using pixels.

Here is my jsFiddle showing the variable font size.

http://jsfiddle.net/2GCCk/1/

Any idea how to get all the font's the same size? Thanks.

span {
    color: #333;
    position: absolute;
    font-size: 15px;  // pixels are getting stretched or something
    width: 54px;
    height: 25px;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
Smith
  • 2,904
  • 3
  • 19
  • 25
  • See [this question](http://stackoverflow.com/questions/6492027/css-transform-jagged-edges-in-chrome), but why don't you skew just the span and leave text as it is? – nice ass Jan 09 '14 at 16:03
  • Well, I am going to have different text appear for each skewed container as it is hovered so I would like to keep the html structure that I have which requires me to unskew the text. If you take a look at my jsFiddle you can see what I mean. I just posted the span css because I was required to post code by the forum. I just want to be able to make all the text the same size. – Smith Jan 09 '14 at 16:06
  • Anybody encountered this issue before? – Smith Jan 09 '14 at 17:10

0 Answers0