,可以采用以下方法:
<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>
以上两种方法可以实现将旋转的div与另一个div对齐的效果。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云