How do you align 270deg rotated text to top left?

问题

This should be a very simple problem you would think. I have a box with some title text that I want to rotate -90 degrees. I would like it to be absolutely positioned so that the end of the word is nudged into the top left corner. I can get this to align to the bottom easily enough, but the problem is that with variable length text it seems impossible to have it consistently stay within the container when aligning to the top because things like {top: 0} operate on the title before the transform. For my purposes this only needs work in Firefox. I can use javascript if that is the only solution, but you would think this could be done with just CSS.

回答1:

You should use transform-origin to adjust the transformation point, along with some creative use of positioning properties.

http://jsfiddle.net/thirtydot/JxEfs/1/

CSS:

#box {
    padding: 30px;
    position: relative;
    border: 1px solid blue;
}
#box > div {
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 100%;
    white-space: nowrap;

    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: right top;
    -moz-transform: rotate(270deg);
    -moz-transform-origin: right top;
    -ms-transform: rotate(270deg);
    -ms-transform-origin: right top;
    -o-transform: rotate(270deg);
    -o-transform-origin: right top;
    transform: rotate(270deg);
    transform-origin: right top;
}

HTML:

<div id="box">
    hello
    <div>rotated!</div>
</div>

回答2:

Can also work without right:100% Just rotate 270 deg around left top and then translate it back at new 100% width.

transform: rotate(-90deg) translate(-100%, 0);
transform-origin: 0 0;

http://jsfiddle.net/zW7SP/

来源：https://stackoverflow.com/questions/7668703/how-do-you-align-270deg-rotated-text-to-top-left

标签

html

css

transform

alignment