Menu
How do I rotate text 90 degrees without using the style sheet? I have placed the following instruction in the header area of the page:
<style>
div.rotate-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
Then I placed the following around the paragraph in question.
<div id="rotate-text">
<p>My paragraph</p>
</div>
But its not working and hence my question.
445
To achieve -90 deg text writing-mode: vertical-lr writes text vertically but is basically equivalent to rotating the text 90 degrees. With transform: rotate(180deg) we end up with the -90 degrees look we want.
Rotate text can be done by using the rotate() function. We can rotate the text in clockwise and anti-clockwise direction. The rotate function can also rotate HTML elements as well.
To rotate text 90 degrees: -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
Here is a small visual example:
#rotate-text {
width: 25px;
transform: rotate(90deg);
}<div id="rotate-text">
<p>My paragraph</p>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
