Question

我想将div作为另一个div的子项追加而不改变其位置（从用户的角度来看）。

“未来”父母旋转-30°，将成为一个孩子的元素旋转-30°。

如何计算未来孩子的右（左，上）位置？

我试图取消未来父母的轮换

transform:rotate(0°)

为未来的孩子做同样的事情

transform:rotate(60°)

但是将transform-origin设置为未来父级的转换起源，意味着

Left(futur child)-tranform-originx (parent)
top(futur child)-transform-originy (parent)

但它似乎没有运行任何的想法？

HTML：

<div id="futurParentFrame" style="z-index:1000;position:absolute;left:100px;top:100px;background-color:red;border:black 6px dashed;width:800px;height:500px;transform:rotate(-30deg)">
</div>
<div id="futurChildDiv" style="z-index:1002;position:absolute;left:493px;top:192px;background-color:gray;border-left:blue 4px dashed;border-right:blue 2px dashed;width:250px;height:150px;transform:rotate(30deg);"></div>

Answer 1

数学有点复杂。我试图以最简单的方式完成它。

单击按钮以创建新子项。旧的是半透明的，所以你可以看到它们重叠

＆＃13;

function createChild () {
    var parent = document.getElementById("futurParentFrame");
    var child = document.getElementById("futurChildDiv");

    var parentCoor = getCoor (parent);
    var childCoor = getCoor (child);
    
    var newChild = child.cloneNode(true);
    newChild.id = "newChild";
    newChild.style.transform = "rotate(60deg)";
    var r = Math.hypot (parentCoor.x - childCoor.x, parentCoor.y - childCoor.y);
    var alpha = -30 * Math.PI / 180;
    var relativeX = childCoor.x - parentCoor.x; 
    var relativeY = childCoor.y - parentCoor.y; 
    var rotatedX = relativeX * Math.cos(alpha) + relativeY * Math.sin(alpha); 
    var rotatedY = relativeX * -Math.sin(alpha) + relativeY * Math.cos(alpha); 
    var left =  (parentCoor.width * 0.5) - parentCoor.borderLeft - (childCoor.width * 0.5) + rotatedX;
    var top =  (parentCoor.height * 0.5) - parentCoor.borderTop - (childCoor.height * 0.5) + rotatedY;    
    newChild.style.left = left + "px";
    newChild.style.top = top + "px";
    parent.appendChild(newChild);
}

function getCoor (element) {
    var left = element.offsetLeft;
    var top = element.offsetTop;
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    var centerX = left + width * 0.5; 
    var centerY = top + height * 0.5; 
    var borderLeft = parseInt (element.style.borderLeftWidth);
    var borderTop = parseInt (element.style.borderTopWidth);
    return {left: left, 
            top: top,
            width: width,
            height: height, 
            x: centerX, 
            y: centerY,
            borderLeft: borderLeft,
            borderTop: borderTop};
}

＆＃13;

#futurChildDiv {
  opacity: 0.5;
}

＆＃13;

<div id="futurParentFrame" style="z-index:1000;position:absolute;left:100px;top:100px;background-color:red;border:black 6px dashed;width:800px;height:500px;transform:rotate(-30deg)">
</div>
<div id="futurChildDiv" style="z-index:1002;position:absolute;left:493px;top:192px;background-color:gray;border-left:blue 4px dashed;border-right:blue 2px dashed;width:250px;height:150px;transform:rotate(30deg);"></div>
<button onclick="createChild();">run</button>

＆＃13;

变换 - 旋转父元素内旋转元素的原点

1 个答案: