旋转菜单（基于CSS3动画transform）

效果预览：

实现思路：
设置小菜单的旋转基点transform-origin为中间圆的中心，再根据对小菜单设置不同的旋转角度即可。
实现代码：
html

<ul>
    <li><span>旋</span></li>
    <li><span>转</span></li>
    <li><span>菜</span></li>
    <li><span>单</span></li>
    <li><span>2</span></li>
    <li><span>0</span></li>
    <li><span>2</span></li>
    <li><span>1</span></li>
    <li><span>嗯</span></li>
</ul>

css

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #2C3A47 ;
}

ul {
    list-style-type: none;
    width: 300px;
    height: 300px;
    position: relative;
    padding: 0;
}


/*控制每一个小菜单样式*/
ul li {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e74c3c;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 2em;
    color: #ffffff;
    transition: all 1s;
    /*改变旋转基点*/
    transform-origin: 150px 150px;
    /*最开始让小菜单隐藏*/
    transform: scale(0);
}

/*控制每一个小菜单的旋转角度*/
ul:hover>li:nth-child(1) {
     transform: scale(1) rotate(40deg);
 }

/*控制菜单内内容正着显示 让其在父级li旋转一定角度之后 再旋转一定角度 使其一共旋转360度的倍数*/
ul:hover>li:nth-child(1) span{
    transform: scale(1) rotate(320deg);
}

ul:hover>li:nth-child(2) {
    transform: scale(1) rotate(80deg);
}

/*转两圈*/
ul:hover>li:nth-child(2) span{
    transform: scale(1) rotate(640deg);
}

ul:hover>li:nth-child(3) {
    transform: scale(1) rotate(120deg);
}

/*三圈*/
ul:hover>li:nth-child(3) span {
    transform: scale(1) rotate(960deg);
}

ul:hover>li:nth-child(4) {
    transform: scale(1) rotate(160deg);
}

/*四圈*/
ul:hover>li:nth-child(4) span {
    transform: scale(1) rotate(1280deg);
}

ul:hover>li:nth-child(5) {
    transform: scale(1) rotate(200deg);
}

/*五圈*/
ul:hover>li:nth-child(5) span {
    transform: scale(1) rotate(1600deg);
}

ul:hover>li:nth-child(6) {
    transform: scale(1) rotate(240deg);
}

/*六圈*/
ul:hover>li:nth-child(6) span {
    transform: scale(1) rotate(1920deg);
}

ul:hover>li:nth-child(7) {
    transform: scale(1) rotate(280deg);
}

/*七圈*/
ul:hover>li:nth-child(7) span {
    transform: scale(1) rotate(2240deg);
}

ul:hover>li:nth-child(8) {
    transform: scale(1) rotate(320deg);
}

/*八圈*/
ul:hover>li:nth-child(8) span{
    transform: scale(1) rotate(2560deg);
}

ul:hover>li:nth-child(9) {
    transform: scale(1) rotate(360deg);
}

/*九圈*/
ul:hover>li:nth-child(9) span {
    transform: scale(1) rotate(3240deg);
}

/*旋转面*/
ul::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    border-radius: 50%;;
    background: #e74c3c;
    transform: translate(-50%,-50%);
}

/*旋转面文字*/
ul::before {
    content: "cheng";
    text-transform: uppercase;
    font-size: 2em;
    position: absolute;
    top: 40%;
    left: 40%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    transform: translate(-10%);
    color: #ffffff;
    z-index: 2;
}