旋转后如何排列元素

Question

我在排队 divs 时遇到了问题，已轮换。

比如.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

这一切都很好，但问题是如果我将.curve的left和top设置为这些值，如下：

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

浏览器将像素四舍五入并将left 定位在61px 上，并在divs 之间留下一个微小的间隙。对于我正在做的事情，这个微小的差异很重要。

这是一个显示问题的小提琴：https://jsfiddle.net/39q5m71u/2/

现在，我知道我可以将两个 divs 排列在一个包装器中并旋转包装器，我知道我可以排列两个 divs 然后旋转 .curve 大约相同的变换原点坐标作为.straight，但由于涉及缩放项目以处理排列具有不同角度值的多个旋转div的原因，这些解决方案将不起作用。

我想知道是否有人能想到一种替代方法，仅在 轮换后才能将divs 排列起来？谢谢！

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));

为了处理一些锯齿状，我在两个现有的 div 周围添加了一个 .container div 并添加了：

.container {
  backface-visibility: hidden;
}

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