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>