Javascript 如何使元素从变换后的形式中获得位置

我试图用

变换：缩放（0.5，0.5）

制作一些东西，但在我应用了这个规则之后，所有元素都变小了，但它们的位置保持不变-我如何将变换也应用于边距、边框和填充？

您可以使用

变换原点：0

，但即使这样也不能满足您的要求。如果您愿意，我可以建议您转换这些元素的父元素

选中此项，并在下面输入代码以供参考：

HTML

transform:scale（）实际上不会改变DOM中元素的大小。相反，它将该元素放在一个单独的层上，在GPU端改变其大小，然后使用该层显示元素，同时保留元素的原始位置和尺寸。如果您检查该元素，您将看到它的边界框（以蓝色勾勒）与屏幕上的实际内容不同

如果希望图元影响其他图元，则必须更改其实际标注属性，如
宽度
、
高度
、
填充
，等等。
请注意，如果在动画中使用，这会严重影响页面性能，因为这些属性会触发完整的布局重新计算

快速演示转换后的图元不会更改布局：


.box
{
宽度：100px；
高度：100px；
利润率：10px；
背景：#ccc；
边框：10px纯绿；
填充：10px；
背景剪辑：内容框；
}
.recalc.盒子
{
动画：recalc 1s无限交替线性；
}
.transform.box
{
动画：缩放1s无限交替线性；
}
.集装箱
{
显示：内联flex；
垂直对齐：中间对齐；
长方体阴影：0 1px蓝色；
}
@关键帧比例{
0%{
变换：缩放（.5，.5）；
},
100%{
变换：比例（1,1）；
}
}
@关键帧重演{
0%{
宽度：50px；
高度：50px；
边框宽度：5px；
填充物：5px；
保证金：5px；
},
100%{
宽度：100px；
高度：100px；
边框宽度：10px；
填充：10px；
利润率：10px；
}
}

使改变
道具更换
使用transform:translate（50px，100px）；
<div class="parent">
  <div class="transformed">
  </div>
  <div class="transformed">
  </div>
</div>

.parent {
  transform: scale(0.5, 0.5);
  transform-origin: 0 0;
}
.transformed {
  display: inline-block;
  height: 100px;
  width: 100px;
  padding: 10px;
  border: 1px solid lightgreen;
  /* transform: scale(0.5, 0.5); */
  /* transform-origin: 0 0; */
}