在变换后检索宽度和高度

当对元素应用诸如旋转（45deg）之类的变换时，该元素的视觉尺寸改变。但是，JavaScript 中的 width 和 height 属性仍然反映原始未转换的尺寸。

解决方案：使用 getBoundingClientRect()

要获取转换后更新的尺寸，请使用HTMLDOMElement 上的 getBoundingClientRect() 方法。该方法返回一个包含变换后的高度和宽度的对象。

示例：

// Get the element
const element = document.querySelector('.transformed');

// Calculate the rotated dimensions
const rect = element.getBoundingClientRect();

// Access the rotated width and height
const rotatedWidth = rect.width;
const rotatedHeight = rect.height;

演示：

访问此 jsFiddle 获取实际示例：https://jsfiddle.net/your_url_here

注意： 此方法将为您提供整个元素的尺寸，包括任何边框或填充。如果您只需要计算内容尺寸，则应在元素的内容元素上使用 offsetWidth 和 offsetHeight（例如，转换后的元素中的