如何在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