旋转 Div 的绝对位置答案

【问题标题】：Position absolute for a rotated Div旋转 Div 的绝对位置
【发布时间】：2013-11-25 07:56:55
【问题描述】：

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

为了详细说明这个问题，我在下面的小提琴中添加了 2 个父子输出。 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?
    });

正是，我想找出子div的旋转角度、宽度、高度和坐标系之间的关系。请让我知道是否存在这样的事情。谢谢。

【问题讨论】：

top 和 left 样式规则适用于子 div 的原始位置，而不是旋转后的位置。因此，如果您首先使用top 和left 值定位子div，然后旋转它，您将获得完全相同的结果。如果您想要单击您提供的链接后看到的结果，为什么不从头开始创建它们呢？除非您向我们展示更多内容，否则我无法欣赏您的努力。

标签： javascript jquery css geometry transform

【解决方案1】：

你可以作为样式使用：

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

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

【讨论】：

您的解决方案正在运行，但在我的项目中，我有许多子元素的各种缩放级别和尺寸。所以我不得不使用 Chandranshu 的解决方案。它也运作良好。

【解决方案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 移动它们，您可以在运行时计算这些值并使用它们。

【讨论】：

【解决方案3】：

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

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

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

祝你好运……

【讨论】：