如何在CSS中旋转文本

如何在CSS中旋转文本以获得以下输出…

在这里输入图像说明 喜

编辑：

感谢您的快速build议。 我已经在jsfidle中添加了我的示例代码：

http://jsfiddle.net/koolkabin/yawYM/

我面临的问题是，当我们旋转文本，然后它打破了alignment和立场……那么是什么原因造成的，我怎样才能pipe理他们？

您需要使用CSS3 转换属性 rotate – 请参阅此处哪些浏览器支持它以及您需要使用的前缀。

webkit浏览器的一个例子是-webkit-transform: rotate(-90deg);

编辑：问题发生了很大的变化，所以我添加了一个在Chrome / Safari中运行的演示 （因为我只包含了-webkit- CSS前缀规则）。 你的问题是，你不想旋转标题股利 ，但只是其中的文字。 如果你删除你的旋转， <div>是在正确的位置，所有你需要做的是将文本包裹在一个元素，并旋转。

作为jQuery UI的一部分，已经有了一个可定制的小部件 – 请参阅手风琴演示页面。 我相信一些CSS聪明，你应该能够使手风琴垂直，并旋转标题文本:-)

编辑2：我曾预料文本中心问题，并已更新我的演示 。 有一个高度/宽度约束，所以更长的文字仍然可以打破布局。

编辑3： 它看起来像水平版本是原计划的一部分，但我看不到在演示页面上configuration它的任何方式。 我错了…新的手风琴是即将到来的 jQuery UI 1.9的一部分！ 所以你可以尝试开发构build，如果你想要的新function。

希望这可以帮助！

我想这是你在找什么？

增加了一个例子：

html： 

 <div class="example-date"> <span class="day">31</span> <span class="month">July</span> <span class="year">2009</span> </div>

CSS： 

 .year { display:block; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support }

所有的例子都来自所提到的网站。

你可以像这样使用… 

 <div id="rot">hello</div> #rot { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width:100px; }

看看这个小提琴： http : //jsfiddle.net/anish/MAN4g/

Interesting Posts