Beispiel für die Verwendung von CSS3 zum Anordnen von Elementen um einen Mittelpunkt

<Stil>
    *{
        Rand: 0;
        Polsterung: 0;
        Box-Größe: Rahmenbox;
    }
    .Surround-Box,
    .Mittelpunkt{
        Position: absolut;
        oben: 50 %;
        links: 50%;
        Breite: 20px;
        Höhe: 20px;
        Rand links: -10px;
        Rand oben: -10px;
        Randradius: 50 %;
        Hintergrundfarbe: #000;
    }
    .Kreis{
        /* Dies muss absolut positioniert sein, damit die Position ausgeweitet werden kann*/
        Position: absolut;
        oben: -10px;
        links: -10px;
        Breite: 40px;
        Höhe: 40px;
        Zeilenhöhe: 40px;
        Randradius: 50 %;
        Textausrichtung: zentriert;
        Farbe: #fff;
    }
    .Kreis1{
        Hintergrundfarbe: rot;
        /* rotateZ steuert die Richtung, jedes Element dreht sich um 30 Grad und 12 Elemente sind genau 360 Grad. translateY steuert den Abstand jedes Elements vom Mittelpunkt*/
        transformieren: Z drehen (30 Grad) Y verschieben (80px);
    }
    .Kreis2{
        Hintergrundfarbe: orange;
        transformieren: Z drehen (60 Grad) Y verschieben (80 Pixel);
    }
    .Kreis3{
        Hintergrundfarbe: gelb;
        transformieren: Z drehen (90 Grad) Y verschieben (80px);
    }
    .Kreis4{
        Hintergrundfarbe: grün;
        transformieren: Z drehen (120 Grad) Y verschieben (80 Pixel);
    }
    .Kreis5{
        Hintergrundfarbe: seegrün;
        transformieren: Z drehen (150 Grad) Y verschieben (80 Pixel);
    }
    .circle6{
        Hintergrundfarbe: blau;
        transformieren: Z drehen (180 Grad) Y verschieben (80 Pixel);
    }
    .Kreis7{
        Hintergrundfarbe: lila;
        transformieren: Z drehen (210 Grad) Y verschieben (80 Pixel);
    }
    .Kreis8{
        Hintergrundfarbe: Helllachs;
        transformieren: drehenZ(240 Grad) verschiebenY(80px);
    }
    .Kreis9{
        Hintergrundfarbe: Dunkelrosa;
        transformieren: drehenZ(270 Grad) verschiebenY(80px);
    }
    .Kreis10{
        Hintergrundfarbe: hellgelb;
        transformieren: Z drehen (300 Grad) Y verschieben (80 Pixel);
    }
    .Kreis11{
        Hintergrundfarbe: hellgrün;
        transformieren: drehenZ(330 Grad) verschiebenY(80px);
    }
    .circle12{
        Hintergrundfarbe: helles Schiefergrau;
        transformieren: drehenZ(360 Grad) verschiebenY(80px);
    }
</Stil>

<Text>
    <div Klasse="Mittelpunkt"></div>
    <div Klasse="Surround-Box">
        <div Klasse="Kreis Kreis1">1</div>
        <div Klasse="Kreis Kreis2">2</div>
        <div Klasse="Kreis Kreis3">3</div>
        <div Klasse="Kreis Kreis4">4</div>
        <div Klasse="Kreis Kreis5">5</div>
        <div Klasse="Kreis Kreis6">6</div>
        <div Klasse="Kreis Kreis7">7</div>
        <div Klasse="Kreis Kreis8">8</div>
        <div Klasse="Kreis Kreis9">9</div>
        <div Klasse="Kreis Kreis10">10</div>
        <div Klasse="Kreis Kreis11">11</div>
        <div Klasse="Kreis Kreis12">12</div>
    </div>
</body>