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;
}

Answer 1

您只需要弄乱transform skew。

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

有关解决方案，请参阅此JSFiddle。

（P.S。这是一种很酷的菜单动画！）

CSS3圆形菜单

1 个答案: