CSS3円形メニュー

私はthis美しい円形メニューを見つけました。私は自分自身のニーズに合わせるために苦労しています。CSS3円形メニュー

私はそのメニューから4つのアイテムしか必要とせず、その '幅'（横のスペース）を増やす必要があります。

私はこのfiddleに元のコードを入れました。 4つのアイテムのバージョンは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

私は解決策に取り組んでいますが、私は1つのコメントがあります：偶数のアイテムを持つことは、中央に出ることができないので奇数を持つほど冷たく見えません。 5または3を使用できますか？ –

これは、コンパイルされたCSSを使ってLessやCompassのようなものを使っている可能性が高いです。手でこれを修正したいのであれば、[インタラクティブなデモ] [1]を見るのが本当に役に立ちます。基本的には、リのスキュー（平行四辺形）を調整し、アンカーのスキューと回転を調整して、目的の形状になるようにします。残念ながら、正しいものを見つけるには多くの試行錯誤が必要です。私はそれを行うにはコンパイルのいくつかの種類を使用するか、それを計算するjavascriptメソッドから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

答えて

関連する問題