CSS3 圆形动画导航

因为圆一共分为六份，每两份被一个父元素包裹，设置父元素旋转，并且对没一份再次设置旋转，使文字始终保持是正文不会出现倾斜，不易观看。

html

<div class="box">
    <div class="top">
        <span>1</span><span>4</span>
    </div>
    <div class="top">
        <span>2</span><span>5</span>
    </div>
    <div class="top">
        <span>6</span><span>3</span>
    </div>

    <div class="center">
        <div class="botton">
            <span>1-1</span><span>1-4</span>
        </div>
        <div class="botton">
            <span>1-2</span><span>1-5</span>
        </div>
        <div class="botton">
            <span>1-6</span><span>1-3</span>
        </div>
    </div>
</div>

css

<style>
        *{
            margin:0;
            padding:0;
        }
        .box{
            width:500px;
            height:500px;