How do I rotate text in css to get following output:
hi,
Edit:
Thanks for quick suggestion. I have added my sample code in jsfidle:
http://jsfiddle.net/koolkabin/yawYM/
HTML:
<div class="mainWrapper">
<div class="rotateObj">
<div class="title active">First Text Title</div>
<div class="content">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
<div class="title">First Text Title</div>
<div class="content hide">
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
Here goes my bla bla bla text and more stuffs...
</div>
</div>
</div>
CSS:
.mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
.rotateObj{position:relative; height:400px;}
.rotateObj .title{
float:left;
background:gray;
width:50px;
height:100%;
/** Rounded Border */
border-radius:5px;-moz-border-radius:5px;
/** Rotation */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform:rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotateObj .active{background:green;}
.rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
.hide{display:none;}
The problem I am facing is that when we rotate the text then it breaks the alignment and positions. So what is causing that, and how can I manage them?
This question is related to
css
text-rotation
The answer is
You can use like this...
<div id="rot">hello</div>
#rot
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
width:100px;
}
Have a look at this fiddle:http://jsfiddle.net/anish/MAN4g/
I guess this is what you are looking for?
Added an example:
The html:
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>
The css:
.year
{
display:block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}
Alle examples are from the mentioned site.
In your case, it's the best to use rotate option from transform property as mentioned before. There is also writing-mode property and it works like rotate(90deg) so in your case, it should be rotated after it's applied. Even it's not the right solution in this case but you should be aware of this property.
Example:
writing-mode:vertical-rl;
More about transform: https://kolosek.com/css-transform/
More about writing-mode: https://css-tricks.com/almanac/properties/w/writing-mode/
Using writing-mode and transform.
.rotate {
writing-mode: vertical-lr;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
<span class="rotate">Hello</span>
Source: Stackoverflow.com