仅旋转 CSS 按钮中的文本答案

【问题标题】：Rotate just the text in a CSS button仅旋转 CSS 按钮中的文本
【发布时间】：2013-10-02 07:29:11
【问题描述】：

我创建了一个 CSS 按钮。我想在按钮中垂直旋转文本，但只是文本。我怎样才能做到这一点。我的css按钮代码：

.button_example{

border:1px solid #7d99ca; 
-webkit-border-radius: 3px; 
display: table-column-group;
/*-webkit-transform: rotate(-90deg); rotate the whole button*/
-moz-border-radius: 3px;
border-radius: 5px;
font-size:22px;
font-family:Impact, Charcoal, sans-serif; 
padding: 10px 10px 10px 10px; 
text-decoration:none; 
display:inline-block;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
font-weight:strong; 
color: #00a19c;
color: #3388fa;


 background: transparent;   /* size and positioning*/
 margin-left: 121px;
 margin-top: 1px;
 width: 24px;
 height: 485px; 
 font-size:14px;
 font-weight:700;
 position:absolute;left:1120px;top:180px;

background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#FFFFFF);

}

知道如何只旋转文本吗？

【问题讨论】：

标签： css button text rotation

【解决方案1】：

如果不在按钮内添加跨度（或任何其他内联元素）以应用变换样式，我不知道有任何其他方法可以实现此目的。

CSS：

button span {
    display: inline-block;
    transform: rotate(-90deg);
}

HTML：

<button><span>Your Text</span></button>

记得为 Internet Explorer 添加供应商前缀（-moz、-webkit、-ms、...）和备用，因为它不支持在没有过滤器的较低版本中旋转。

这是一个使用 CSS 旋转的基本示例：http://css-tricks.com/snippets/css/text-rotation/

【讨论】：

你能举个例子吗。我在 CSS 中是假的。我试图为 text_rotation 创建一个完整的类。
您还需要在 span 上添加 display: inline-block; 才能使旋转工作
如果是输入怎么办？ <input class='flip-btn' value='T' />

【解决方案2】：

将文本旋转 90 度：

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

更多：Vertical Text Direction

【讨论】：