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

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

• javascript
• jquery
• css

• You are aware that the link on the top right of the demo page leads to an article actually explaining the technique in more detail, right …? – C3roe Commented Oct 11, 2013 at 22:15
• 1 I'm working on a solution, but I have one ment: Having an even number of items won't look as cool as having an odd number because it can't e out in the center. Could you use 5 or 3? – Robin Commented Oct 11, 2013 at 22:29
• 1 This is likely being done through piled css with something like Less or Compass. If you want to modify this on by hand, Looking at the [interactive demo][1] is really helpful. Basically you can adjust the skew on the li's (the parallelograms) and adjust the skew and rotation on the anchors until you get the desired shape. Unfortunately it would take a lot of trial and error to find the right one. I would suggest using some kind of piled less to do it or a one off javascript method to calculate it. [1]: tympanus/Tutorials/CircularNavigation/interactivedemo/… – Chris Peterson Commented Oct 11, 2013 at 22:29
• thanks for the input guys. @SuperScript: unfortunately i need four. I'm fine as long as they are evenly spaced and as I said, have room for more text (not a lot more, a little more than what it has in the last fiddle i mentioned). for Chris: I've tried playing a lot with those values from the chrome console, but I just couldn't do it and thought about asking here on SO, hoping somebody would be better than me at CSS3. – Zubzob Commented Oct 11, 2013 at 22:37
• 3 That is a way cool animation. I'm glad you asked it on Stackoverflow just so people (like me) could see it. – Thomas Commented Oct 11, 2013 at 22:52

1 Answer 1

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!)