First your code is outdated. All browsers support unprefixed version of transform, so you need to add unprefixed version. Then remove -moz- and -o- versions because they stopped existing few years ago.
Problem with transform is it doesn't change bounding box. So if content is 100x20 pixels, container dimensions remains 100x20 after transform instead of changing to 20x100, thus content is rendered outside of box.
Because of that issue you must have fixed width and height of item to rotate it and you need a second container. Something like this
Code: Select all
<div class="transform-container"><div class="transform-content">Text to transform</div></div>
If content is 100x20 pixels, after transformation width and height are flipped, so it requires 20x100 space. Therefore container must be 20x100, content must be 100x20:
Code: Select all
.transform-container { width: 20px; height: 100px; }
.transform-content { width: 100px; height: 20px; }
Then you need to position content above container and rotate it:
Code: Select all
.transform-container { position: relative; }
.transform-content { position: absolute; left: 0; top: 100px; transform: rotate(-90deg); transform-origin: left top; }
Transformation is done relatively to top left corner, therefore after transformation text is displayed above container. To fix that top value must be equal to container height.
Full code:
Code: Select all
.transform-container { position: relative; width: 20px; height: 100px; }
.transform-content { width: 100px; height: 20px; position: absolute; left: 0; top: 100px;
-ms-transform: rotate(-90deg); -ms-transform-origin: left top;
-webkit-transform: rotate(-90deg); -webkit-transform-origin: left top;
transform: rotate(-90deg); transform-origin: left top;
}
Note that I removed filter for IE9 in that code because it behaves differently.
User input is dynamic, therefore it changes width/height, so it probably won't work. Unfortunately there aren't any other ways to rotate text via css.