CSS通过旋转向下扩展文本？

Question

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

以下是我正在看的内容：

这是我的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值来解决此问题

Check this demo

我将左侧值更改为-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; }

非常感谢！