CODEWITHSUNDEEP
javascriptjquerycss
Zubzob
Zubzob

Reputation: 2743

CSS3 Circular Menu

I've found this beautiful circular menu and I'm struggling to adapt it to my own needs.

I only need four items from that menu and their 'width' (horizontal space) should be increased.

I've put the original code in this fiddle. The version with four items is here.

As previously said, I'm trying to fill that empty space between by increasing their size because I'd like to fit more text in there.

Part of the CSS that I think it might be relevant:

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

Upvotes: 5

Views: 2415

Answers (1)

Robin
Robin

Reputation: 7895

You just need to mess with the transform skew.

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

See this JSFiddle for the solution.

(P.S. That's a way cool menu animation!)

Upvotes: 9

Related Questions