如何在旋转后排列元素

时间:2016-05-04 23:00:49

标签: javascript jquery css math rotation

我有一个排队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才能排列?谢谢!

1 个答案:

答案 0 :(得分:0)

正在发生的事情是浏览器在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;
}

enter image description here

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