旋轉CSS按鈕中的文本

我創建了一個css按鈕。我想旋轉垂直文本按鈕，但只是文本。我怎樣才能做到這一點。我的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);

}

任何想法如何旋轉只是文本？

來源

2013-10-02 Jose Ramon

我不知道有任何其他方法可以在按鈕內不添加跨度（或任何其他內聯元素）的情況下完成此操作，以將轉換樣式應用於其上。

CSS：

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

HTML：

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

記住添加供應商前綴（-moz，-webkit，-MS，...）和用於回退Internet Explorer作爲它不」 t支持在較低版本中旋轉而無需過濾器。

這裏是用CSS旋轉基本樣本：http://css-tricks.com/snippets/css/text-rotation/

來源

2013-10-02 07:32:41 Sven

你能給我舉一個例子。我在CSS中是虛擬的。我試圖爲text_rotation創建一個完整的類。 –

我編輯了我的答案。 – Sven

您還需要在該範圍內添加'display：inline-block;'以便旋轉工作 –

-1

旋轉文本90度：

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

這裏更多：Vertical Text Direction

來源

2013-10-02 07:47:31

旋轉CSS按鈕中的文本

回答

相關問題