Question

我有一些我已经旋转的文字-90deg。有没有人知道如何让它锚定到父元素的天花板上？

到目前为止，我只能在场上停泊：

HTML：

<div>
    <h2>hello, world</h2>
</div>

CSS：

div { height: 300px; background: red; position: relative; }
h2 {
    color: white;
    margin: 0;
    font-size: 2.5em;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: bottom left;
    position: absolute;
    left: 1.5em;
    bottom: 0;
}

将bottom: 0更改为top: 0会产生奇怪的结果;文本的左侧和右侧都没有固定在天花板上。

有没有人知道纯粹的CSS方式呢？

Answer 1

如果您需要将元素锁定在顶部，而左角则需要查看类似

的内容

h2 {
    color: white;
    margin: 0;
    font-size: 2.5em;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: top right;
    position: absolute;
    right: 100%;
    top: 0;
    white-space:nowrap;
}

http://jsfiddle.net/8gsuD/1/

Answer 2

尝试：

h2 {
     -webkit-transform-origin: top right;
      top: 0;
    }

Fiddle

将旋转的文本锚定到父元素的上限

2 个答案: