Как выстроить элементы после их поворота

Question

У меня проблема с вывернутыми div s, которые были повернуты.

Например, если .straight повернут 30deg, я хочу, чтобы получить новые координаты смещения на правом нижнем углу, так что я могу установить нижний левый угол .curve совпасть с этой координатой точно.

Для того, чтобы получить смещение координат в нижнем правом углу .straight, я использую следующее:

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 

Это все хорошо, но проблема в том, что если я устанавливаю left и top из .curve этих значений, а именно:

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

браузер округляет пикселей и позиционирует left на 61px и оставляет крошечный зазор между div с. Для того, что я делаю, это незначительное несоответствие имеет большое значение.

Вот скрипка, которая показывает проблему: https://jsfiddle.net/39q5m71u/2/

Теперь я знаю, что я могу выстраиваться как div с в обертке и провернуть обертку, и я знаю, что может выстраиваться как div с, а затем повернуть .curve о той же координате начала координат, что и .straight, но по причинам, связанным с масштабированием проекта для обработки выстраивания нескольких поворотных разделов с разными значениями угла, эти решения не будут работать.

мне интересно, если кто-то может думать, альтернативного подхода, который может набить div с до только после они повернуты? Благодаря!

Answer 1

То, что происходит в том, что браузер выполняет пиксельное закругление на left собственности:

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

Если вручную изменить значение left, скажем, 60,49, что маленький зазор удаляется.

Я был в состоянии удалить пробел путем округления br_corner_x вниз до ближайшего целого числа:

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

Чтобы справиться с некоторыми из зубчатости происходят, я добавляя .container DIV вокруг двух существующих див и добавил :

.container { 
    backface-visibility: hidden; 
} 

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