Question

我有一个父div和子div。孩子是父母div的绝对位置。子div由90 degrees旋转。由于原点是孩子的中心（2个对角线的会合点），因此子div在容器外移动了像素。

为了详细解释这个问题，我在下面的小提琴中添加了2个父母 - 孩子输出。 http://jsfiddle.net/Xja29/

在小提琴中，我添加了一个事件，将孩子的位置重置为各自父母的左上角。这是重置代码。注意顶部＆amp; 2个子div的左值不同

JQuery代码：

    $("#link").click(function(){

        //Child 1 needs top=45 and left=-45
        $("#c1").css({"top":"45px", "left":"-45px"});

        //Whereas Child 2 needs top=30 and left=-30
        $("#c2").css({"top":"25px", "left":"-25px"});

        //As one can see there are different values for top and left for childs of different dimension. Is there any relation or formula to find out this values?
    });

确切地说，我想找出儿童div的旋转角度，宽度，高度和坐标系之间的关系。如果存在任何此类情况，请告诉我。谢谢。

Answer 1

您可以使用样式：

transform: rotate(90deg) translate(0,-100%)
transform-origin: top left

在不使用Javascript的情况下获取请求的对齐

Answer 2

您始终可以使用以下计算：

top = (child_div.width - child_div.height)/2
left = (child_div.height - child_div.width)/2 = -top

让我们来看看top的公式。子div的中心位于父div的顶部以下(child_div.height/2)个单位。旋转子div后，其顶部位于其自身中心上方(child_div.width/2)个单位。这意味着其顶部位于其父级顶部之上(child_div.width/2) - (child_div.width/2)个单位。简化它，我们得到上述公式。 left的公式可以类似地推导出来。

如果您要使用Javascript移动它们，可以在运行时计算这些值并使用它们。

Answer 3

好吧，子div相对于父容器位于自己的坐标系中，该容器的位置'不是静态的（否则为主体）。如果要围绕某个点旋转div，这不是其坐标系的原点，则采取的步骤如下：

从div的位置矢量中减去旋转点的矢量。（所以旋转中心位于原点）。
旋转div。
通过将“rotation-center-vector”添加到div的位置来撤消第一步。

这些步骤是一种非常通用的方法和一个常见的概念，只需看看转换矩阵即可。换句话说，围绕某个点旋转总是涉及这三个步骤（对于缩放对象也是如此）。

旋转Div的绝对位置

3 个答案: