Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Jagged text issue while using rotation webkit

Jagged text issue while using rotation webkit

Problem

Any ideas on how to make the text appear 'inline'?

I made a polaroid photo effect on my portfolio, the rotate completely ruins the font, unsure if there is a fix.

rest assured, it's not so bad with my current font but other fonts look awful.

Code:

figure.polaroid {
width: 221px;
height: 240px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
background-color: white;
padding: 10px;
box-shadow: 1px 2px 10px black;
margin-top: 25px;
border-radius: 5px;
}
Problem courtesy of: samayres1992

Solution

Let me guess, Chrome?

Try -webkit-backface-visibility: hidden;

I've read that some people avoid this issue by applying a 3d transform for Rotation, such as transform: rotate3d(1, 2.0, 3.0, 10deg), so that might be a cleaner solution.

Solution courtesy of: daveyfaherty

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Jagged text issue while using rotation webkit

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×