如何获取旋转后DOM元素的宽高及端点坐标位置

旋转后元素的端点坐标不能直接用e.getBoundingClientRect().left加上元素宽高计算，因为getBoundingClientRect()返回的是元素旋转后的最小轴对齐包围盒的位置，已经和原矩形的边界不匹配了。你可以通过变换矩阵计算得到原始元素四个顶点的准确视口坐标，具体实现如下：

实现方法 #

通用顶点计算函数 #

// 传入元素，返回四个顶点的视口坐标，顺序为：左上、右上、右下、左下
function getElementCorners(el) {
  const rect = el.getBoundingClientRect();
  // 读取元素的变换矩阵
  const transformMatrix = new DOMMatrix(getComputedStyle(el).transform);
  // transform-origin默认是元素中心，如果你自定义了该属性需要对应调整计算逻辑
  const originX = rect.width / 2;
  const originY = rect.height / 2;

  // 定义元素未旋转时，四个顶点相对于变换原点的局部坐标
  const localCorners = [
    { x: -originX, y: -originY }, // 左上
    { x: rect.width - originX, y: -originY }, // 右上
    { x: rect.width - originX, y: rect.height - originY }, // 右下
    { x: -originX, y: rect.height - originY } // 左下
  ];

  // 对每个局部坐标应用变换，再映射到视口坐标系得到最终坐标
  return localCorners.map(corner => {
    const transformed = transformMatrix.transformPoint(corner);
    return {
      x: transformed.x + rect.left + originX,
      y: transformed.y + rect.top + originY
    };
  });
}

调用示例 #

你可以直接用这个函数获取三个盒子的所有端点坐标：

const box1 = document.querySelector("#box1");
const box2 = document.querySelector("#box2");
const box3 = document.querySelector("#box3");

// 获取box2的四个顶点
const box2Corners = getElementCorners(box2);
console.log("box2右上角距离屏幕左侧位置：", box2Corners[1].x);
console.log("box2右下角距离屏幕左侧位置：", box2Corners[2].x);

原理说明 #

• getBoundingClientRect()返回的是能把旋转后元素完全框住的、边和屏幕水平/垂直方向对齐的矩形的坐标，所以不管元素旋转多少度，这个矩形的边永远是正的，自然没法直接对应原矩形的顶点。
• 上面的方法先拿到元素的变换矩阵（包含旋转、缩放、平移等所有变换信息），把原矩形的局部坐标做对应的矩阵变换，再映射到视口坐标系下，不管元素加了什么transform属性，都能拿到准确的顶点位置。
• 如果你的元素自定义了transform-origin，只需要对应修改函数里originX和originY的计算逻辑即可。

内容的提问来源于stack exchange，提问作者Yupma