以圆形方式排列按钮并使用CSS进行动画处理

Question

有三个按钮。 我想把它们围成一圈。 有没有一种方法可以将它们放在同一div中，然后在div属性中提供一些内容，而不是为每个按钮提供坐标？
以及如何制作动画/例如单击任何按钮时，该按钮应旋转并显示在顶部。

Answer 1

这是风格

.Hfaraz {
background-color: #03F;
height: 100px;
width: 100px;
float: left;
}
.Hfaraz:hover{
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -o-transform: rotate(45deg); /* Opera */

-webkit-transition: transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
-ms-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
 }

这是HTML

<div class="Hfaraz"></div>
<div class="Hfaraz"></div>
<div class="Hfaraz"></div>