Reputation: 969
Unable to rotate the text. The gray div width has to be 50. Using Chrome.
HTML:
<div class="divContactInfo">
<div class="tabHeader">
<span class="textRotate">My Contact Info</span>
</div>
</div>
CSS:
.divContactIno
{
position:fixed;
right:0;
border:1px solid red;
top:49%;
width:350px;
height:500px;
}
.divContactInfo .tabHeader
{
border:1px solid gray;
width:50px;
height:120px;
}
.textRotate
{
-webkit-trasform:rotate(-90deg);
-moz-trasform:rotate(-90deg);
}
Upvotes: 0
Views: 109
Reputation: 35953
In response to your comment.. Try this
.textRotate {
display: block;
white-space: pre;
left: 10px;
margin-top: 80px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
Upvotes: 2
Reputation: 283
.divContactInfo
{
position:fixed;
right:0;
border:1px solid red;
top:49%;
width:350px;
height:500px;
}
.divContactInfo .tabHeader
{
border:1px solid gray;
width:50px;
height:120px;
}
.textRotate
{
display:block;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
}
Upvotes: 0
Reputation: 2323
try add propertydisplay
and then use Rotate:
.divContactInfo
{
position:fixed;
right:0;
border:1px solid red;
top:49%;
width:350px;
height:500px;
}
.divContactInfo .tabHeader
{
border:1px solid gray;
width:50px;
height:120px;
}
.textRotate {
display:block;
/* 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);
}
Upvotes: 1
Reputation: 359776
You cannot rotate an inline element, and you need to spell transform
correctly.
.textRotate {
display: inline-block;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
}
Note that you also misspelled divContactInfo
as divContactIno
.
http://jsfiddle.net/mattball/R7bQn/
Upvotes: 2