将旋转的div与另一个div对齐

<style>
    .container {
        position: relative;
    }

    .rotating-div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: rotate(45deg);
        transform-origin: center;
    }

    .align-div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<div class="container">
    <div class="rotating-div">
        <!-- 旋转的div内容 -->
    </div>
    <div class="align-div">
        <!-- 与旋转的div对齐的div内容 -->
    </div>
</div>

<style>
    .container {
        position: relative;
    }

    .rotating-div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .align-div {
        position: absolute;
        /* 初始位置，在JavaScript中动态计算并调整 */
    }
</style>

<div class="container">
    <div class="rotating-div" id="rotatingDiv">
        <!-- 旋转的div内容 -->
    </div>
    <div class="align-div" id="alignDiv">
        <!-- 与旋转的div对齐的div内容 -->
    </div>
</div>

<script>
    // 获取旋转的div的位置和角度
    var rotatingDiv = document.getElementById("rotatingDiv");
    var rotatingDivRect = rotatingDiv.getBoundingClientRect();
    var rotatingDivCenterX = rotatingDivRect.left + rotatingDivRect.width / 2;
    var rotatingDivCenterY = rotatingDivRect.top + rotatingDivRect.height / 2;
    var rotatingDivAngle = Math.atan2(rotatingDivCenterY, rotatingDivCenterX);

    // 计算对齐div的位置
    var alignDiv = document.getElementById("alignDiv");
    var alignDivWidth = alignDiv.offsetWidth;
    var alignDivHeight = alignDiv.offsetHeight;
    var alignDivCenterX = rotatingDivCenterX - Math.cos(rotatingDivAngle) * (alignDivWidth / 2) - Math.sin(rotatingDivAngle) * (alignDivHeight / 2);
    var alignDivCenterY = rotatingDivCenterY - Math.sin(rotatingDivAngle) * (alignDivWidth / 2) + Math.cos(rotatingDivAngle) * (alignDivHeight / 2);

    // 调整对齐div的位置
    alignDiv.style.left = alignDivCenterX - alignDivWidth / 2 + "px";
    alignDiv.style.top = alignDivCenterY - alignDivHeight / 2 + "px";
</script>