CSS回転テキスト - 複雑

Question

これは単なるCSSの問題ですが、おそらくjQueryや非常に巧妙なCSSテクニックで保存できます。あなたの考えを見てください。私はJSFiddleを作成しましたので、実験できます。 http://jsfiddle.net/WMVMW/157/

下記の問題を参照してください。

これはアンドロイドとサファリのブラウザでのみ機能するため、IEについては心配しないでください！

このプロジェクトを開始した当初は、CSS3を使っていくつかのHTMLテキストを回転させる予定でしたが、実際には変換プロパティの意味を十分に理解していませんでした。

私がやっていることのアイデアは、インタラクティブなフロアプランです。私はブース/スタンドを表す絶対的な位置付けのDIVSをたくさん持っています。私のDIVSのいくつかは本当に薄いが高いので、私の考えはDIV -90度の中のテキストを回転させることでした。

これは、各DIVがどのようにレイアウトされているかです。実際にはDIVではなく、DIVスタイルのビヘイビアを持つタグです。

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

スパンタグがdisplay: table cell;行動を持っているの内側に、これはテキストが垂直ボックス内に整列させることができるそうです。

タグのID番号が位置のみスタイルを行い、クラス.cellスタイルは、他の全ての動作を制御します。..

私の挑戦は、テキスト-90degreesを回転させる.rotateと呼ばれる新しいクラスを導入することです。しかし、見た目は同じですが、テキストを含むタグから幅と高さを継承するのではなく、テキストが流れます。

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

は、すべてのCSSスタイルで...ここJSfiddleを見る回転クラスが追加されるか、以下を参照して

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

すべてのヘルプは素晴らしいだろう。私はこれが十分に理解できることを願っています。

Answer 1

トリックは全体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（回転することになるだろうと）し、それを再配置。

Answer 2

あなたは他の内部の余分な<span>を追加することができます。http://jsfiddle.net/WMVMW/160/