CSS3圆形菜单

我发现了this美丽的圆形菜单，我正在努力适应自己的需求。CSS3圆形菜单

我只需要该菜单中的四个项目，它们的“宽度”（水平空间）应该增加。

我把这个原始代码放在这个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; 
}

来源

2013-10-11 Zubzob

你都知道，在演示页面的右上角的链接指向的文章实际上解释更详细的技术吧...？ – CBroe

我正在研究一个解决方案，但我有一个评论：偶数个项目看起来不像有奇数的那么酷，因为它不能出现在中心。你能用5或3吗？ –

这很可能是通过编译的CSS来完成的，比如Less或Compass。如果你想手动修改这个，查看[interactive demo] [1]真的很有帮助。基本上，您可以调整li（歪斜）上的歪斜，并调整锚上的歪斜和旋转，直到获得所需的形状。不幸的是，要找到合适的，需要大量的试验和错误。我会建议使用某种编译少的做它或一个JavaScript的方法来计算它。 [1]：http://tympanus.net/Tutorials/CircularNavigation/interactivedemo/index.html –

你只需要惹transformskew。

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

查看此JSFiddle的解决方案。

（附注：这是一个非常酷菜单的动画！）

来源

2013-10-11 22:46:32

啊人，我知道我放弃得太快了。感谢您的回答:) – Zubzob

走向@SuperScript。这是一些杀手级的CSS – Thomas

回答

相关问题