CSS3 变换旋转和对齐答案

【问题标题】：CSS3 Transforms rotate and alignmentCSS3 变换旋转和对齐
【发布时间】：2012-11-20 20:05:18
【问题描述】：

我有一个常规的无序列表，其中包含一些列表项作为菜单导航 - 非常标准。我旋转了从中心旋转的列表项。列表中的菜单标题各不相同，所以看起来有点奇怪。我使用了 transform-origin 来改变项目左侧的旋转，而不是中心，但是当它像手臂一样旋转时，单词之间的间隙是不同的。有没有办法避免这种情况？所以它从左边旋转但是每个单词之间的间隙是一致的？

<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/

谢谢各位，回复

【问题讨论】：

标签： css transform

【解决方案1】：

如果我理解您的要求，我相信您只需要在 li 上设置一致的宽度 - 如下所示：

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

这里有一个jsfiddle 来演示。

【讨论】：

谢谢。我不敢相信我忽略了这一点。我现在问起来几乎感觉不好，但仍然感谢:)
Np。唯一要记住的是，如果您使用像我在这里所做的那样的相对度量，它将相对于容器进行缩放，并且如果 ul 变得足够窄，则文本可能会换行。通过在 ul 上使用固定像素宽度或最小宽度可以很容易地防止它。

【解决方案2】：

我很想看到只使用 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';
}

简单地说，浏览您的菜单并将与左侧的距离定义为每次变大（线性）。你会得到你想要的:)

【讨论】：