If you’re trying to turn some text using rotation for elements, such as rotating text 90 degrees clockwise/counterclockwise then you’re at the right place.
So how can we achieve this? Simple! Check out the below CSS which gives you cross-browser compatibility:-
.rotate {
transform: rotate(-90deg);
/* Legacy vendor prefixes that you probably don't need... */
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.
Check out the following CodePen to see this in action!