javascript - 如果旋转元素的高度增加了某个值，那么旋转元素的真实位置（顶部，左侧）是什么？

Question

我有一个以特定角度旋转的 div。如果我要将 div 的高度增加一些值。如何获取或计算当前div的真正上左值和高度同时增加后div的真正上左值。我想计算这些值以在高度增加后保留原始的真实右下角位置

JS Fiddle描述了我要解决的问题

const increaseHeight = function(div){
/*
calculate the true top and left of the div
calculate the true top and left of the div after the height is increased
calculate the difference that needs to be applied such that when the height changes the original true bottom right position remains the same after the height is increased
  */    
 }

请注意，我只想使用 javascript 来解决这个问题，并且没有应用额外的 css

标签： javascript

Answer 1

您可以使用它getBoundingClientRect()来检索已转换元素的属性：

var x = document.getElementById("app");
console.log(x.getBoundingClientRect());

你的小提琴应该记录：

DOMRect {x: 17.10739517211914, y: 47.10739517211914, width: 265.78521728515625, height: 265.78521728515625, top: 47.10739517211914, …}