Zubzob Zubzob - 4 months ago 46
CSS Question

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

Answer

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

Comments