CSS旋转文本-复杂

Question

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

请参阅下面的问题。

这只需要在android和safari浏览器上工作-所以不用担心IE！

当我开始这个项目时，我最初计划使用CSS3来旋转一些html文本——并没有完全理解transform属性的含义。

我正在做的是一个交互式平面图。我有很多绝对定位的DIVS，代表展位。因为我的一些DIV很薄但很高，所以我的想法是将DIV内的文本旋转90度。

这就是每个DIV的布局方式——它们实际上不是DIV，而是具有DIV风格行为的A标签。

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

A标记内部的跨度具有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/