CSS 旋转文本 - 复杂

Question

这只是一个 CSS 问题，但可以使用 jQuery 或非常聪明的 CSS 技术来保存。看你怎么想。我创建了一个 JSFiddle，以便您进行实验。 http://jsfiddle.net/WMVMW/157/

请参阅下面的问题。

这只适用于 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 标记内部的 span 具有 display: table cell; 行为，这样文本可以在框内垂直对齐。

A标签上的ID号只做位置样式，类.cell样式控制所有其他行为..

我的挑战是引入一个名为.rotate 的新类，它将文本旋转-90 度。但在外观上仍然具有相同的外观 - 并且文本流动而不是从包含 A 标记继承宽度和高度。看看下面如何添加旋转类...

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

在这里查看 JSfiddle... 包含所有 css 样式，以及

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/