Wie verschachtelte Divs mit Rotation mit CSS3 zentrieren?

Question

Ich versuche, css mix-blend-mode-Eigenschaft zu verwenden, um eine Überlagerung von Divs mit Differenz zu machen, ein Schachmuster zu machen. Aber mein Problem ist, alles elegant zu zentrieren.

Dies ist mein Code:

var n = 20; 
 
var s = 300; 
 

 
for (var x = 1; x < n; x++) { 
 
    $("div").last().append("<div/>"); 
 
} 
 

 
$("div").css({"transform": "rotate(" + (360/n) + "deg) translate(-30%, -30%)", 
 
       "width": s, 
 
       "height": s});

body { 
 
    background-color: black; 
 
    overflow: hidden; 
 
} 
 

 
div { 
 
    mix-blend-mode: difference; 
 
    background-color: white; 
 
    position: absolute; 
 
    top: 30%; 
 
    left: 30%; 
 
    border-radius: 50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

Alle Ideen, wie perfekt alles zu zentrieren?

EDIT: Ich möchte, dass das Loch des Schach Donut in der Mitte der Seite sein.

Answer 1

Nicht sicher, ob dieses 100% für Ihren Fall funktioniert, aber wenn Sie diese divs in einem Container platzieren können, der mit absoluter Positionierung relativ zur Seite zentriert ist, können Sie das Donut-Loch ziemlich einfach zentrieren. Wenn s und translate Werte konstant sind, wäre es so etwas wie dieses:

HTML:

<section> 
<div></div> 
</section> 

CSS:

section { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; /* half of s */ 
    margin-left: -100px; /* half of s */ 
} 

div { 
    mix-blend-mode: difference; 
    background-color: white; 
    position: absolute; 
    left: 30%; /* same as translate value */ 
    top: 30%; /* same as translate value */ 
    border-radius: 50%; 
} 

Fiddle

Else müssten Sie sie einstellen mit JS, so:

var n = 20; 
var s = 200; 
var t = "30%"; 
for (var x = 1; x < n; x++) { 
    $("div").last().append("<div></div>"); 
} 

$("div").css({"transform": "rotate(" + (360/n) + "deg) translate(-" + t + ", -" + t + ")", 
       "width": s, 
       "height": s, 
       "left": t, 
       "top": t}); 
$("section").css({"margin-left": s/-2 + "px", 
        "margin-top": s/-2 + "px"}) 

Fiddle