Learn how to use CSS transform: rotate to create vertical text

Learn how to use CSS transform: rotate to create vertical text

Usually when we create html elements then frame of these elements are horizontal. We will pay more attentions to width of frame rather than heights Most of time When it come to text within them. Sometime we want to display the element text in vertical fashion. It was more difficult at that time when we use Internet Explorers to archive this task and at that time it’s like losing a battle. Now days it’s like a breeze but we are going to tell you how you can do this. Here is the way to do this:

How to create vertical text:
With using css creating vertical text is become so easy.

Code:
vertical-text {
transform: rotate(90deg);
transform-origin: left top 0;
}
Its depends on you that in which direction you would love to display this like you want to display this in vertically.rather then this Rotation will be done by different way but rotate value is that which convert the text into vertical.

Here is the helpful tip for you:

Code:
.vertical-text {
  float: left;
}
CSS helps us to take more loads and also make powerful text rather turning the text vertical But using with this code you can do this job easily.
Author
bhawanisingh
Views
1,845
First release
Last update
Rating
0.00 star(s) 0 ratings
Top