CSS旋转文本 - 复杂 [英] CSS rotate text - complicated

问题描述

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

请参阅下面的问题。

这只适用于Android和Safari浏览器 - 因此不必担心IE！

当我开始这个项目时，我最初计划使用CSS3旋转一些HTML文本 - 不真正完全理解transform属性的含义。

我在做的是一个互动的平面图。我有很多绝对定位的DIVS代表摊位/摊位。因为我的一些DIVS真的很薄，但很高，我的想法是旋转文本内DIV -90度。

这是每个DIV是如何布局的 - 他们

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

A标签的span内容为 display：table cell; 行为，这样文本可以在框内垂直对齐。

A标签上的ID号只有位置样式， code> .cell style控制所有其他行为。

我的挑战是引入一个新类 .rotate ，可旋转文本-90degrees。但在外观上仍然具有相同的外观 - 文本流不是从包含A标签继承宽度和高度。请参阅下面的旋转类添加...

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

请参阅JSfiddle这里...所有css样式和

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

任何帮助将是真棒。我希望这是可以理解的。

解决方案

诀窍是旋转整个 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 （因为它将被旋转），然后重新定位它。

This is just a CSS issue, but could be saved with jQuery perhaps or very clever CSS techniques. See what you think. I've created a JSFiddle so you can experiment. http://jsfiddle.net/WMVMW/157/

See problem below.

This only has to work on android and safari browsers - so don't worry about IE!

When I started this project, I originally planned to use CSS3 to rotate some html text - not really fully understanding the implications of transform property.

The idea of what I am doing is an interactive floor plan. I am having lots of absolute positioned DIVS which represent booths/stands. Because some of my DIVS are really thin but high, my idea was to rotate the text inside the DIV -90 degrees.

This is how each DIV is layed out - They're not actually DIV's but A tags with DIV style behaviors.

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

The span inside of the A tag has display: table cell; behavior, this is so the text can be vertically aligned inside the box.

The ID number on the A tag only does position styles, the class .cell style controls all other behaviors..

My challenge is to introduce a new class called .rotate which rotates the text -90degrees. But still having the same appearance in looks - and the text flows instead of inheriting the width and height from the containing A tag. See below how the rotate class is added...

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

See the JSfiddle here... with all css styles, and the

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

Any help would be awesome. I hope this is understandable enough.

解决方案

The trick is to rotate the whole a and not just the span. Live example: 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;    
}

So I reversed the width and height (as it is going to be rotated) and then repositioned it.

这篇关于CSS旋转文本 - 复杂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！