以圆形的方式排列按钮,并使用css动画



有三个按钮。我想把它们排成一个圆圈。有没有办法把它们放在同一个div中然后给一些indiv属性,而不是给每个按钮的坐标?
以及如何制作动画/例如,点击任何按钮,按钮应该旋转并来到顶部。

这就是STYLE

.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>

最新更新