CSS3 圆形菜单

Question

我发现了一个漂亮的圆形菜单this，但我很难将其适应到我的需求中。我只需要四个项目，并且它们的“宽度”（水平空间）应该增加。我将原始代码放在fiddle中，有四个项目的版本在here。如前所述，我正在尝试通过增加它们的大小来填充那些空白空间，因为我想在那里放更多的文本。我认为这部分CSS可能是相关的：

.csstransforms .cn-wrapper li {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    margin-top: -1.3em;
    margin-left: -10em;
    width: 10em;
    height: 10em;
    font-size: 1.5em;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: rotate(76deg) skew(60deg);
    -moz-transform: rotate(76deg) skew(60deg);
    -ms-transform: rotate(76deg) skew(60deg);
    transform: rotate(76deg) skew(60deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    pointer-events: none;
}

- Zubzob

---

你知道演示页面右上角的链接实际上是指向一篇更详细解释该技术的文章吗？ - CBroe

我正在研究一个解决方案，但是我有一个评论：拥有偶数个项目看起来不如拥有奇数个项目酷，因为它不能在中心显示。你能使用5或3吗？ - Robbie Wxyz

这可能是通过编译后的 CSS 实现的，类似于 Less 或 Compass。如果您想手动修改此内容，查看交互演示非常有帮助。基本上，您可以调整 li（平行四边形）上的倾斜度，并调整锚点上的倾斜度和旋转度，直到获得所需的形状。不幸的是，要找到正确的形状需要很多试错。我建议使用某种编译后的 less 或一次性的 JavaScript 方法来计算它。 - Chris Peterson

谢谢大家的回复。 @SuperScript：不幸的是，我需要四个。只要它们间距均匀，并且像我之前提到的那样有更多文本的空间（不是很多，比最后一个 fiddle 中的文本稍微多一点），我就没问题了。 给 Chris：我尝试在 Chrome 控制台中多次调整这些值，但我无法做到，所以想在 SO 上询问，希望有人比我更擅长 CSS3。 - Zubzob

这个动画太酷了。我很高兴你在Stackoverflow上发布了它，这样人们（比如我）就可以看到它了。 - Thomas

Answer 1

您只需要修改 transform 中的 skew 参数即可。

transform: rotate(...) skew(40deg);

请查看这个 JSFiddle 以获取解决方案。 （附言：这是一种非常酷的菜单动画！）

- Robbie Wxyz

---

干得好，@SuperScript。那是一些厉害的CSS。 - Thomas