css - CSS用旋转向下扩展文本？

Question

我已经将一些文本旋转了-90度，但是如果我增加文本长度，它会“向上”扩展（即正确，旋转-90度），但我希望文本向下扩展（即有点像旋转 90 度而不是 -90 度，但我仍然想要 -90 度方向）。

这是我正在查看的内容：

这是我的html和css：

<div class="header"><div class="wrapper"><span>Products</span></div></div>

.section > .header { display: block; position: relative; float: left; font-size: 48pt;      width: 157px; height: 100%; }
.section > .header > .wrapper { width: 100%; height: 100%; 
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg); }
.section > .header > .wrapper > span { display: block; position: relative; left: 25px; height: 100%;
}

有没有办法用 CSS 做到这一点？我尝试了很多东西（旋转包装器，然后反向旋转内部跨度，对齐文本）和其他东西，但无济于事。

谢谢，瑞安

Answer 1

您可以通过left降低.header > .wrapper > span

检查这个演示

在那我将左值更改为-120px

.section > .header > .wrapper > span { 
    display: block; 
    position: relative; 
    left: -120px; //changed the value
    height: 100%;
}​

Answer 2

想通了：（需要更正确地进行文本对齐）

.section > .header > .wrapper { display:block; text-align: right; }
.section > .header > .wrapper > span { display: block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); height: 100px;  width: 600px; position: relative; top: 260px; left: -180px; }

不管怎么说，还是要谢谢你！