CSS3 を使用して中心点の周りに要素を配置する方法の例

<スタイル>
    *{
        マージン: 0;
        パディング: 0;
        ボックスのサイズ: 境界線ボックス;
    }
    .サラウンドボックス、
    .中心点{
        位置: 絶対;
        上位: 50%;
        左: 50%;
        幅: 20px;
        高さ: 20px;
        左マージン: -10px;
        上マージン: -10px;
        境界線の半径: 50%;
        背景色: #000;
    }
    。丸{
        /* 位置を広げることができるように絶対配置する必要があります */
        位置: 絶対;
        上: -10px;
        左: -10px;
        幅: 40px;
        高さ: 40px;
        行の高さ: 40px;
        境界線の半径: 50%;
        テキスト配置: 中央;
        色: #fff;
    }
    .circle1{
        背景色: 赤;
        /* rotateZ は方向を制御し、各要素は 30 度回転し、12 個の要素は正確に 360 度回転します。 translateYは中心点からの各要素の距離を制御します*/
        変換: rotateZ(30deg) translateY(80px);
    }
    .circle2{
        背景色: オレンジ;
        変換: rotateZ(60deg) translateY(80px);
    }
    .circle3{
        背景色: 黄色;
        変換: rotateZ(90deg) translateY(80px);
    }
    .circle4{
        背景色: 緑;
        変換: rotateZ(120deg) translateY(80px);
    }
    .circle5{
        背景色: 海緑;
        変換: rotateZ(150deg) translateY(80px);
    }
    .circle6{
        背景色: 青;
        変換: rotateZ(180deg) translateY(80px);
    }
    .circle7{
        背景色: 紫;
        変換: rotateZ(210deg) translateY(80px);
    }
    .circle8{
        背景色: ライトサーモン;
        変換: rotateZ(240deg) translateY(80px);
    }
    .circle9{
        背景色: ディープピンク;
        変換: rotateZ(270deg) translateY(80px);
    }
    .circle10{
        背景色: 薄い黄色;
        変換: rotateZ(300deg) translateY(80px);
    }
    .circle11{
        背景色: 薄緑;
        変換: rotateZ(330deg) translateY(80px);
    }
    .circle12{
        背景色: ライトスレートグレー;
        変換: rotateZ(360deg) translateY(80px);
    }
</スタイル>

<本文>
    <div class="center-point"></div>
    <div class="surround-box">
        <div class="circlecircle1">1</div>
        <div class="circlecircle2">2</div>
        <div class="circlecircle3">3</div>
        <div class="circlecircle4">4</div>
        <div class="circlecircle5">5</div>
        <div class="circlecircle6">6</div>
        <div class="circlecircle7">7</div>
        <div class="circlecircle8">8</div>
        <div class="circlecircle9">9</div>
        <div class="circlecircle10">10</div>
        <div class="circlecircle11">11</div>
        <div class="circlecircle12">12</div>
    </div>
</本文>