CSS旋轉文本 - 複雜

這只是一個CSS問題，但可以使用jQuery保存或許或非常聰明的CSS技術。看看你的想法。我創建了一個JSFiddle，以便您可以進行試驗。 http://jsfiddle.net/WMVMW/157/CSS旋轉文本 - 複雜

查看下面的問題。

這隻能在Android和Safari瀏覽器上工作 - 所以不要擔心IE！

當我開始這個項目時，我原本計劃使用CSS3來旋轉一些HTML文本 - 並非真正理解transform屬性的含義。

我正在做的是一個交互式平面圖。我有很多絕對定位的DIVS代表攤位/展位。由於我的一些DIVS非常薄但很高，我的想法是旋轉DIV-90度內的文字。

這就是每個DIV的佈局 - 它們實際上不是DIV的，而是具有DIV風格行爲的A標籤。

<a href="" title="" id="200" class="cell"><span>Harley Davidson</span></a>

A標籤內的跨度有display: table cell;行爲，這是爲了讓文字可以盒內垂直對齊。

上的標籤只做位置風格的ID號，類.cell式控制所有其他行爲..

我的挑戰是引入了一個名爲.rotate其旋轉文本-90degrees新類。但在外觀上仍具有相同的外觀 - 文本流動，而不是繼承包含A標籤的寬度和高度。請參閱下面的旋轉類是如何加入...

<a href="" title="" id="200" class="cell rotate"><span>Harley Davidson</span></a>

見的jsfiddle這裏......所有的CSS樣式，以及

http://jsfiddle.net/WMVMW/157/

任何幫助將是真棒。我希望這足以理解。

來源

2011-08-09 Joshc

你想這樣做：http://jsfiddle.net/rathoreahsan/gjQfY/ –

訣竅是旋轉整個a而不僅僅是span。活生生的例子：http://jsfiddle.net/WMVMW/164/

a.rotate{ 
    -moz-transform:rotate(-90deg); 
    -webkit-transform:rotate(-90deg); 
    -o-transform:rotate(-90deg); 
    -ms-transform:rotate(-90deg); 
} 

#R135, #R135-1 { 
    left: -35px; 
    top: 85px; 
    width:157px; 
    height: 42px;  
}

所以我顛倒了width和height（因爲它會旋轉），然後重新定位它。

來源

2011-08-09 12:14:05 tw16

我認爲這是可以完成的唯一方法。除非聰明的JavaScript被用來翻轉跨度的繼承高度。我正在避免這種選擇，因爲我有很多立場重新定位和扭轉寬度/高度。 ......但這似乎是迄今唯一可行的方法。謝謝你的幫助！ – Joshc

你可以添加其他內部的額外<span>：http://jsfiddle.net/WMVMW/160/

來源

2011-08-09 11:49:56

這並不顯示所有的文字。它從* Harley Davidson Retail *中切斷了零售*。 – tw16

這是我第一次嘗試，但'哈雷戴維森零售'文本制動三條線 - 需要在一條線上流動。跨度的繼承寬度和高度值需要翻轉 - 然後它會工作！ - 甚至可能會有一個額外的跨度。感謝您的幫助。 – Joshc

CSS旋轉文本 - 複雜

回答

相關問題