CSS3變換旋轉和對齊

我有一個正常的無序列表，有幾個列表項作爲菜單導航 - 非常標準。我已經旋轉了從中心旋轉的列表項目。列表中的菜單標題有所不同，所以看起來有點奇怪。我使用變換原點將項目左側的旋轉更改爲左側，而不是中心，但由於它像手臂一樣旋轉，因此單詞之間的差距不同。有什麼辦法可以避免這種情況？所以它從左側旋轉，但每個單詞之間的差距是一致的？CSS3變換旋轉和對齊

<ul> 
    <li><a href="#">Culture</a></li> 
    <li><a href="#">Eat &amp; Drink</a></li> 
    <li><a href="#">Field Trips</a></li> 
    <li><a href="#">Happenings</a></li> 
    <li><a href="#">Locals</a></li> 
    <li><a href="#">Our City</a></li> 
</ul> 

ul { 
    margin-top: 80px; 
} 
ul li { 
    font-size: 9px; 
    display: inline-block; 
    text-transform: uppercase; 
    margin-right: 10px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
}

我已經爲你包括了兩個jsFiddles。一個在列表項目上進行變換，另一個在變換和變換源頭上進行。

http://jsfiddle.net/9eNnN/

http://jsfiddle.net/aKXnz/

謝謝你們， [R

來源

2012-11-20 John the Painter

如果我明白你問什麼，我相信你只需要設置上慄一致的寬度 - 這樣的事情：

li { width: 5%; } // you may need to play around with this value

這裏是一個jsfiddle來演示。

來源

2012-11-20 20:16:32 kinakuta

謝謝。我不敢相信我忽略了這一點。我現在感覺幾乎不好，但是謝謝:) –

Np。唯一要記住的是，如果您使用的是我在這裏完成的相對度量，它將相對於容器進行縮放，並且如果ul變得足夠窄，文本可以包裝。通過在ul上使用固定的像素寬度或最小寬度，可以很容易地防止這種情況。 – kinakuta

我會好奇地看到只有使用CSS的解決方案！

在平均時間，我可以給你一個JavaScript的解決問題的方法：http://jsfiddle.net/aKXnz/1/

在CSS中定義菜單position:absolute。這會將所有鏈接放在左邊框上（一個在另一個上）。

在JavaScript

var myLis = document.getElementsByTagName('li'); 
for(var i= 0, len = myLis.length; i< len; i++) 
{ 
    myLis[i].style.left = (30*i) + 'px'; 
}

簡單地說，通過你的菜單，然後從左側定義距離爲每次大的（線性）。你會得到你想要的:)

來源

2012-11-20 20:28:58 leMoisela

CSS3變換旋轉和對齊

回答

相關問題