以圓形方式排列按鈕並使用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>