css - CSS3 transform - rotate and font goes away -
i'm using simple css3 transformation rule on html element (wich contains many other elements 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 font skretched can see how possible?
check img:
is there way/trick fix font not skrech or going bad, when using rotate css3?
nb: avoid comments "it looks me" :d please check word's chars not vertically aligned, check example word quale l , e chars
in chrome have no problems, firefox seems make problems fonts in rotating :(
as can see font ok if big size font, mean, font-size:30px , more, if go under 30px font not ok.
i've read 2 days ago different chrome browsers might render differently css3 rotation , without -webkit-
.
update:
i have problem in chrome also. rendered output crispy , unaligned (like in picture). i've tried apply (in chrome) -webkit-filter: opacity(0.999);
or -webkit-filter: blur(0px);
, font not crispy, it's fine rendered , aligned, blured bit in both cases. strange. , think works filter.
in case of firefox, -moz-filter
doesn't work i've found solution give same result -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
matrix
1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0
and here screenshot in ff after rotation , after use filters.
fullscreen: http://i.imgur.com/tuad1b2.jpg
and here live example (for chrome , ff)
Comments
Post a Comment