Wie man Elemente anordnet, nachdem sie gedreht worden sind

Question

Ich habe ein Problem, das div s ausgerichtet wird, die gedreht worden sind.

Zum Beispiel, wenn .straight30deg gedreht wurde, möchte ich die neuen Offset-Koordinaten der unteren rechten Ecke bekommen, so dass ich die linke untere Ecke von .curve genau mit dieser Koordinate übereinstimmen einstellen.

Um die Offset-Koordinaten der unteren rechten Ecke des .straight zu bekommen, verwende ich die folgenden:

var straight_width = $(".straight").width(); 
var br_corner_x = straight_width*Math.cos(30*Math.PI/180); //60.62 
var br_corner_y = straight_width*Math.sin(30*Math.PI/180); //35 

Das ist alles gut, aber das Problem ist, dass, wenn stelle ich die left und top von .curve diese Werte wie folgt:

$(".curve").css({"left": br_corner_x, "top": br_corner_y}) 

der Browser die Pixel rundet und positioniert den left bei 61px und hinterlässt eine kleine Lücke zwischen der div s. Für das, was ich mache, ist diese kleine Diskrepanz signifikant. Hier

ist eine Geige, die das Problem zeigt: https://jsfiddle.net/39q5m71u/2/

Nun, ich weiß, dass ich in einer Reihe aufstellen können beide div s in einer Hülle und drehen Sie den Wrapper, und ich weiß, dass ich in einer Reihe aufstellen können beide div s und dann drehen .curve über die gleiche Transformationsursprungskoordinate wie .straight, aber aus Gründen, die das Skalieren des Projekts zur Bearbeitung der Anordnung mehrerer gedrehter divs mit unterschiedlichen Winkelwerten betreffen, funktionieren diese Lösungen nicht.

Ich frage mich, ob jemand einen alternativen Ansatz denken, dass die div s up nur nach sie gedreht wurden, zeichnen kann? Vielen Dank!

Answer 1

Was passiert, ist, dass der Browser auf dem left Eigenschaft Pixel Rundung ausführt:

<div class="curve" style="left: 60.6218px;top: 35px;"></div> 

Wenn Sie manuell den Wert left ändern, sagen wir, 60.49, dass kleine Lücke entfernt wird.

konnte ich die Lücke entfernen, indem br_corner_x nach unten auf die nächste ganze Zahl gerundet:

var br_corner_x = Math.floor(straight_width*Math.cos(30*Math.PI/180)); 

Um mit einigen der Zerklüftung los, ich .container div um die beiden bestehenden divs Hinzufügen und hinzugefügt :

.container { 
    backface-visibility: hidden; 
} 

https://jsfiddle.net/ytzw2bzf/2/