带有垂直文本的 Twitter 选项卡答案

【问题标题】：Twitter Tabs with vertical text带有垂直文本的 Twitter 选项卡
【发布时间】：2014-03-30 02:04:40
【问题描述】：

我使用twitter-bootstrap 创建一个接口。但我不知道如何使用垂直文本创建tab-widget。对于我使用的文本转换：

-moz-transform:rotate(270deg); 
-moz-transform-origin: bottom left;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(270deg);
-o-transform-origin:  bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

谢谢。

【问题讨论】：

您是否正在寻找一个更少的脚本来生成该 css 或 ?

标签： css twitter-bootstrap less

【解决方案1】：

添加自定义类。

HTML：

<div class="letterP3">Hello</div>

CSS：

.letterP3 {    
  -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
      -ms-transform: rotate(90deg); 
       -o-transform: rotate(90deg); 
          transform: rotate(90deg);
            color: #000;
            font-size: 22px;                
            height: 200px;
            width: 200px;
            float: left;        
            vertical-align:top;    
}

http://jsfiddle.net/hellosze/8Rc27/

和 CSS3 工具：

http://www.css3maker.com/text-rotation.html

【讨论】：

【解决方案2】：

@lito - 我已经实现了左/右垂直引导选项卡here - 使用您描述的文本旋转。希望这会有所帮助。

【讨论】：