About a month ago I came across an issue where I was rotating some text to be vertical vs horizontal. When I did this it was impossible to keep the text correctly positioned.
Here's the CSS I was using:
.box {
width: 33.3%;
height: 100%;
float: left;
font-size: 2em;
cursor: pointer;
filter: alpha(opacity=80);
opacity: 0.8;
}
.vertical-text {
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
text-transform: uppercase;
width: 4%;
}
And some HTML:
Skills
Resume
Contact
I was dynamically updating the elements with JS when clicked to show content. And the .vertical-text classes were meant to be the header for each tab. Unfortunately what would happen is when I clicked on each tab the heading would move north of the container.
You can get a feel for the problem here: http://jsfiddle.net/t24tq/
The problem is that rotating elements rotate about their center. When the width of the element changes, the center moves and this changes the point of rotation. So since I wasn’t using fixed widths for my vertical-text I got the awkward movements.
So to fix all you need to do is set a fixed width.
.vertical-text {
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
text-transform: uppercase;
width: 30px;
}