Hey there, I've got some text inside a div that's been transformed with rotate(3deg). Strangely enough, in Firefox, the text appears wavy. When I remove the transform property from the div, the waviness disappears. Is there any way for me to keep the transformation and avoid the waviness?
Here's the HTML:
<div class="card turn-right">
<div class="card-text">
<p>Blah. Blah. Blah.</p>
</div>
</div>
The CSS looks like this:
.card {
display: block;
width: 550px;
height: 375px;
}
.turn-right {
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
Edit:
Just to add, I have to incorporate a @font-face for this particular project.
Screenshot: