如何在旋转后排列元素

Question

我有一个排队NSDateFormatter已被轮换的问题。

例如，如果div已旋转.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之间留下微小的差距。对于我正在做的事情，这个微小的差异很重要。

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

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

我想知道是否有人可以想到一种替代方法，只有在 之后，.straight才能排列？谢谢！

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/