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变换旋转和对齐

回答

相关问题