5

この美しい円形のメニューを見つけたのですが、自分のニーズに合わせるのに苦労しています。

そのメニューから必要な項目は 4 つだけで、それらの「幅」(水平スペース) を増やす必要があります。

元のコードをこのフィドルに入れました。4アイテム入りバージョンはこちら。

前に述べたように、より多くのテキストをそこに収めたいので、サイズを大きくすることでその空白を埋めようとしています。

関連すると思われる 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;
}
4

1 に答える 1

9

をいじるだけですtransform skew。

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

解決策については、このJSFiddleを参照してください。

(PS クールなメニュー アニメーションです!)

于 2013-10-11T22:46:32.237 に答える