html - 以圆形方式排列按钮并使用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>