I have implemented the transform-rotation property in CSS to rotate a div and use it as fixed Facebook and Twitter links on my webpage. However, I have noticed that this rotation is distorting my current text font. When I remove the rotation, the text returns to its normal appearance. Is there a solution to this problem?
Visit my website here.
The divs I am working with are for social media icons (Facebook and Twitter).
Below is the CSS code for the inner divs:
#facebook,#twitter{
display:inline-block;
font-family:"lucida grande",tahoma,verdana;
font-weight:bold;
width:125px;
margin:0px;
}
And here's the CSS code for the social media icons:
#social{
position:absolute;
right:-120px;
bottom:50%;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); // IE 9
-webkit-transform:rotate(-90deg); // Safari and Chrome
}
All I want is for the text to appear clear and crisp without any distortion. Is there an alternative method to achieve this effect without impacting the font style?