CODEWITHSUNDEEP
cssfontsrotationtransform
Filippo oretti
Filippo oretti

Reputation: 49823

CSS3 transform - rotate and font goes away

I'm using this simple css3 transformation rule on an html element (wich contains many other elements like h1,h2,inputs,and img):

    div{ 
  -moz-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(-3deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); 

 }

the problem is font is skretched as you can see how is this possible?

check img: enter image description here

Is there any way/trick to fix font to not skrech or going so bad, when using rotate css3?

NB: to avoid comments like "it looks good to me" :D please check deeply word's chars are not vertically well aligned, check for example the word Quale the l and e chars

in Chrome i have no problems, only Firefox seems to make problems with fonts in rotating :(

As i can see the font is ok only if is a big size font, i mean, font-size:30px and more, if i go under 30px the font is not ok.

Upvotes: 1

Views: 973

Answers (4)

Miljan Puzović
Miljan Puzović

Reputation: 5820

I've read two days ago that different Chrome browsers might render differently CSS3 rotation with and without -webkit-.

UPDATE:

I have this problem in Chrome also. Rendered output is crispy and unaligned (like in your picture). So i've just tried to apply (in Chrome) -webkit-filter: opacity(0.999); or -webkit-filter: blur(0px); and it font is not so crispy, it's fine rendered and aligned, but is blured a bit in both cases. Strange. And I think this works with any filter.

In case of Firefox, -moz-filter doesn't work so I've found this solution which give same result as -webkit-filter in Chrome:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

Numers in values are matrix

1 0 0 0 0 
0 1 0 0 0
0 0 1 0 0 
0 0 0 1 0

And here is screenshot in FF after rotation and after use filters.

enter image description here

Fullscreen: https://i.sstatic.net/3vgXB.jpg

And here is LIVE EXAMPLE (for Chrome and FF)

Upvotes: 2

Jesse
Jesse

Reputation: 799

have you tried creating a parent div to the input and rotating that instead of rotating the input?

Upvotes: 0

Linus Caldwell
Linus Caldwell

Reputation: 11058

:-) I see, you're right. Well, I would say, that's just a rendering issue. I guess from 3 different browsers you get 4 different outputs (like usual with transforms). ;-)

Only solution that sometimes works is forcing 3d mode:

input{ transform:rotate(-3deg), translate3d(0, 0, 0); }

But maybe it does nothing here.

Upvotes: 1

Noah T
Noah T

Reputation: 235

It can change depending on your internet browser. In my experience, Firefox handles rotation the best. Chrome messes up text, and IE has tons of errors.

You could try rotating with Javascript, but that's a little more complicated than CSS transform. https://code.google.com/p/jquery-rotate/

Upvotes: 1

Related Questions