CSS3 원형 메뉴

나는 this 아름다운 원형 메뉴를 발견했습니다 그리고 내 자신의 필요에 적응하기 위해 고군분투하고있다.CSS3 원형 메뉴

나는 해당 메뉴와 자신의 '폭'(가로 공간)를 증가시켜야에서 4 항목이 필요합니다.

나는이 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; 
}

출처

2013-10-11 Zubzob

당신은 데모 페이지의 오른쪽 상단에있는 링크가 실제로 ... 잘, 더 상세하게 기술을 설명하는 기사로 연결 알고 있습니다? – CBroe

나는 해결책을 찾고 있지만 한가지 의견이있다. 짝수 개의 항목을 가지고 있으면 센터에서 나올 수 없으므로 이상한 숫자만큼 멋지게 보일 수 없다. 5 또는 3을 사용할 수 있습니까? –

이것은 Less 나 Compass와 같은 컴파일 된 CSS를 통해 수행 된 것 같습니다. 손으로 이것을 수정하려면 [대화 형 데모] [1]을 보는 것이 정말 도움이됩니다. 기본적으로 리의 기울기 (평행 사변형)를 조정하고 원하는 모양이 될 때까지 앵커의 비뚤어 짐 및 회전을 조정할 수 있습니다. 불행히도 올바른 방법을 찾으려면 많은 시행 착오를 겪을 것입니다. 컴파일 할 일종의 컴파일러를 사용하거나 자바 스크립트를 사용하지 않는 컴파일러를 사용하는 것이 좋습니다. [1] : http://tympanus.net/Tutorials/CircularNavigation/interactivedemo/index.html 입력들 주셔서 감사 –

당신은 방금 transformskew으로 엉망이 필요합니다.

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

해결책을 보려면 JSFiddle을 참조하십시오.

(방법 멋진 메뉴 애니메이션의 P.S.!)

출처

2013-10-11 22:46:32

아아, 나는 너무 빨리 포기했다. 답변 주셔서 감사합니다 :) – Zubzob

@SuperScript가는 방법. 그것은 살인자 CSS입니다. – Thomas

CSS3 원형 메뉴

답변

관련 문제