html - ボタンを円形に配置し、css を使用してアニメーション化する

Question

ボタンは3つ。円形に並べたい。各ボタンの座標を指定する代わりに、同じ 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>