css实现旋转弹出菜单

可以使用CSS3中的transform属性和transition属性来实现旋转弹出菜单效果。

首先，创建一个包含菜单项的HTML结构，如下所示：

<div class="menu">
  <div class="menu-item">菜单项1</div>
  <div class="menu-item">菜单项2</div>
  <div class="menu-item">菜单项3</div>
  <div class="menu-item">菜单项4</div>
</div>

然后，使用CSS样式设置菜单项的样式和默认状态：

.menu {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 50%;
  overflow: hidden;
}

.menu-item {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 100px;
  transform-origin: center center;
  transform: scale(0);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.menu-item:nth-child(1) {
  transform: rotate(0deg) translateY(-60px);
}

.menu-item:nth-child(2) {
  transform: rotate(90deg) translateY(-60px);
}

.menu-item:nth-child(3) {
  transform: rotate(180deg) translateY(-60px);
}

.menu-item:nth-child(4) {
  transform: rotate(270deg) translateY(-60px);
}

其中，`.menu`元素为旋转弹出菜单的容器，设置了圆形样式和溢出隐藏。`.menu-item`元素为菜单项，设置了绝对定位和默认的缩放和不透明度为0，以及过渡效果。

接下来，使用CSS伪类:hover来设置菜单项的悬停状态：

.menu:hover .menu-item {
  transform: scale(1);
  opacity: 1;
}

当鼠标悬停在`.menu`元素上时，菜单项的缩放和不透明度将被设置为1，从而实现了旋转弹出菜单的效果。

最终的CSS代码如下：

.menu {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ccc;
  border-radius: 50%;
  overflow: hidden;
}

.menu-item {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 100px;
  transform-origin: center center;
  transform: scale(0);
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.menu-item:nth-child(1) {
  transform: rotate(0deg) translateY(-60px);
}

.menu-item:nth-child(2) {
  transform: rotate(90deg) translateY(-60px);
}

.menu-item:nth-child(3) {
  transform: rotate(180deg) translateY(-60px);
}

.menu-item:nth-child(4) {
  transform: rotate(270deg) translateY(-60px);
}

.menu:hover .menu-item {
  transform: scale(1);
  opacity: 1;
}