CSS3圓形菜單

我發現了this美麗的圓形菜單，我正在努力適應自己的需求。CSS3圓形菜單

我只需要該菜單中的四個項目，它們的「寬度」（水平空間）應該增加。

我把這個原始代碼放在這個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嗎？ –

這很可能是通過編譯的CSS來完成的，比如Less或Compass。如果你想手動修改這個，查看[interactive demo] [1]真的很有幫助。基本上，您可以調整li（歪斜）上的歪斜，並調整錨上的歪斜和旋轉，直到獲得所需的形狀。不幸的是，要找到合適的，需要大量的試驗和錯誤。我會建議使用某種編譯少的做它或一個JavaScript的方法來計算它。 [1]：http://tympanus.net/Tutorials/CircularNavigation/interactivedemo/index.html –

你只需要惹transformskew。

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

查看此JSFiddle的解決方案。

（附註：這是一個非常酷菜單的動畫！）

來源

2013-10-11 22:46:32

啊人，我知道我放棄得太快了。感謝您的回答:) – Zubzob

走向@SuperScript。這是一些殺手級的CSS – Thomas

回答

相關問題