我可以计算变换后的元素的大小吗？

问题描述

例如，我将其属性perspective(200px)，transform: scale(1.5);和translateZ(100px)应用于元素。因此，如何计算转换后的元素的大小？有公式吗？

我认为当我们将perspective与translateZ一起使用时，这个问题更相关，因为主要是在这些情况下，我不确定我的元素会是什么样子。

.green {
  width: 300px;
  height: 300px;
  outline: 1px solid black;
  background: yellowgreen;
  margin: 50px;
  transform-origin: 400px 0px;
  transform: perspective(200px) scale(1.5) translateZ(100px);
}

<div class="green"></div>

解决方法

我尚不清楚这是否满足您的要求，但看来Element.getBoundingClientRect()将返回元素的转换尺寸：

const elWithTransforms = document.querySelector('#elementWithTransforms');
const elWithoutTransforms = document.querySelector('#elementWithoutTransforms');

const transDimensions = elWithTransforms.getBoundingClientRect();
const noTransDimensions = elWithoutTransforms.getBoundingClientRect();

console.log(`Green element dimensions:\n    width: ${transDimensions.width}\n    height: ${transDimensions.height}`);
console.log(`Purple element dimensions:\n    width: ${noTransDimensions.width}\n    height: ${noTransDimensions.height}`);

.green {
  width: 300px;
  height: 300px;
  outline: 1px solid black;
  background: yellowgreen;
  margin: 50px;
  transform-origin: 400px 0px;
  transform: perspective(200px) scale(1.5) translateZ(100px);
}

.purple {
  width: 300px;
  height: 300px;
  outline: 1px solid black;
  background: purple;
  margin: 50px;
}

<div class="green" id="elementWithTransforms" ></div>
<div class="purple" id="elementWithoutTransforms" ></div>

我不确定这是您需要提前在纸上进行的操作，还是可以在浏览器中使用JS进行的操作。如果是后者，这应该可以满足您的需求。

如果在元素可见之前进行此操作很重要，则可以选择一些方法。如果在元素附加到DOM之前被调用，getBoundingClientRect()将返回全零，但是您可以将元素附加到屏幕外/不可见的DOM上并从getBoundingClientRect()获取尺寸，然后删除该元素，执行您需要执行的所有其他工作，并在取消隐藏后重新附加。

const body = document.querySelector('body');
const div = document.createElement('div');
div.classList.add('green');
div.classList.add('hideOffScreen');
body.appendChild(div);

console.log(div.getBoundingClientRect());

.green {
  width: 300px;
  height: 300px;
  outline: 1px solid black;
  background: yellowgreen;
  margin: 50px;
  transform-origin: 400px 0px;
  transform: perspective(200px) scale(1.5) translateZ(100px);
}

.hideOffScreen {
  position: absolute;
  left: -9999px;
  z-index: -1;
  visibility: hidden;
}