旋转分区的绝对位置

Position absolute for a rotated Div

本文关键字：位置 分区 旋转      更新时间：2023-09-26

我有一个父div和子div。子div相对于父div是绝对位置。子div由90 degrees旋转。由于原点是子对象的中心（2条对角线的交汇点），因此子对象div被移动到容器外部的像素。

为了详细说明这个问题，我在下面添加了两个父母-孩子的输出。http://jsfiddle.net/Xja29/

在小提琴中，我添加了一个事件，将孩子的位置重置为他们各自父母的左上角。这是重置代码。备注顶部&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?
    });

确切地说，我想找出旋转角度、宽度、高度和儿童潜水器坐标系之间的关系。如果有这样的关系，请告诉我。非常感谢。

您可以使用样式：

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

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

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

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)个单位。将其简化，我们得到了上述公式。CCD_ 6的公式可以类似地推导出来。

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

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

  1. 从div的位置向量中减去旋转点的向量（这样旋转中心将位于原点）。

  2. 旋转分区

  3. 通过将"旋转中心矢量"添加到div.的位置来撤消第一步

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

祝你好运。。。

相关文章：