Vertically & horizontally align text after CSS rotation - css

Question

So I'm using CSS to rotate some text from horizontal to vertical (90 degrees) like so:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipv fliph;
My problem is that this shifts the text way outside of the container div. Is there a trick to keep it inside the container? Is there some anchor point that I could set? What is a cross browser way to adjust post?

Answer 1

You could pull it back in with a few CSS properties...
#whatever {
position: relative;
top: -4px;
right: -10px;
}
Alternatively, you could play with the transform-origin property:
transform: rotate(-90deg);
transform-origin:20% 40%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */

Answer 2

Alternative method, which is more browser compliant and doesn't need information about amount of text beforehand:
.disclaimer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
line-height: 15px;
height: 15px;
width: 15px;
overflow: visible;
white-space: nowrap;
}
http://jsfiddle.net/d29cmkej/