CSS用旋转向下扩展文本？答案

【问题标题】：CSS expand text downward with rotate?CSS用旋转向下扩展文本？
【发布时间】：2012-09-29 10:06:31
【问题描述】：

我已将一些文本旋转 -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 做到这一点？我尝试了很多东西（旋转包装器，然后反向旋转内部跨度，将文本右对齐）和其他东西，但无济于事。

谢谢，瑞恩

【问题讨论】：

你考虑过使用图片吗？
是的，我想过。我还听说过一种叫做 Javascript 的语言。我想知道在 CSS 中是否有可能。
也相关：svg

标签： css transform

【解决方案1】：

您可以通过减小.header > .wrapper > span 的left 值来解决此问题

Check this demo

我将左边的值更改为-120px

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

【讨论】：

这并没有解决它。我的错是没有正确的初始左侧值（-120px 是第一个文本“产品”的左侧），但我希望任何比这更长的文本向下展开到页面底部，而不是顶部（过去的标题，就像现在一样）。目前，我必须根据每个标题的宽度更改每个标题跨度的特定左值，只是因为我无法找到让文本向左/向下扩展的方法。

【解决方案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; }

还是谢谢！

【讨论】：