CSS - 旋转 div -90deg - 齐平

Question

我有一个容器，里面有文本，旁边还有一个(向右浮动)。此 div 应重新旋转 -90 度并在其中包含标题文本。

如何旋转这个 div 使其与另一个 div 齐平？

如图所示。问题是我不能使用 transform-origin: right top 因为“起点”不应该是右上角而是可变的，因为文本可以更小或更长。

Answer 1

您可能必须使用 transform-origin 但是，这取决于您的 HTML 的结构。没有您身边的任何代码，这可能是最接近您正在寻找的内容:

http://jsfiddle.net/2GA6H/

使用绝对定位将标题文本放置在右上角并匹配边距(与容器上所需的填充匹配)，然后使用 transform-origin: top right。

像这样:

#caption {
    position: absolute;
    top: 0px;
    right: 32px;    
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: top right;
}

容器相对的位置。