CSS3圆形菜单

Question

我发现这个漂亮的圆形菜单,我正在努力使其适应我自己的需要.

我只需要该菜单中的四个项目,并且应该增加它们的"宽度"(水平空间).

我把原始代码放在这个小提琴里.有四个项目的版本在这里.

如前所述,我试图通过增加它们的大小来填补它们之间的空白区域,因为我想在那里放入更多文本.

我认为可能与CSS相关的部分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;
}

Answer 1

你只需要搞砸了transform skew.

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

请参阅此JSFiddle以获取解决方案.

(PS那是一种酷炫的菜单动画!)