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

Question

我正在尝试用transform: scale(0.5, 0.5)制作一些东西但是在我应用这个规则后，所有元素都变得更小但是它们的位置保持不变 - 我怎样才能将变换应用于边距，边框和填充？

Answer 1

您可以使用transform-origin: 0 0，但即便这样也不足以满足您的要求。我可以建议改变这些元素的父元素，如果这是你的选择。

检查这个fiddle，并在下面编码以供参考：

HTML

<div class="parent">
  <div class="transformed">
  </div>
  <div class="transformed">
  </div>
</div>

CSS

.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; */
}

Answer 2

transform: scale();实际上并没有改变DOM中元素的大小。相反，它将该元素放在单独的图层上，在GPU侧改变其大小，然后使用此图层显示您的元素，同时保留元素的原始位置和尺寸。如果您检查该元素，您将看到其边界框（以蓝色标出）与屏幕上的实际不同。

如果你希望你的元素影响其他元素，你必须改变它们的实际维度属性，如width，height，padding等。请注意，如果它在动画中使用，这会严重影响你的页面性能，因为这些属性会触发完整布局重新计算。

转换元素的快速演示不会改变您的布局：

.box
{
  width: 100px;
  height: 100px;
  margin: 10px;
  background: #ccc;
  border: 10px solid green;
  padding: 10px;
  background-clip: content-box;
}

.recalc .box
{
  animation: recalc 1s infinite alternate linear;
}

.transform .box
{
  animation: scale 1s infinite alternate linear;
}

.container
{
  display: inline-flex;
  vertical-align: middle;
  box-shadow: 0 0 0 1px blue;
}

@keyframes scale{
  0%{
  transform: scale(.5, .5);
  },
  100%{
  transform: scale(1, 1);
  }
}

@keyframes recalc{
  0%{
    width: 50px;
    height: 50px;
    border-width: 5px;
    padding: 5px;
    margin: 5px;
  },
  100%{
    width: 100px;
    height: 100px;
    border-width: 10px;
    padding: 10px;
    margin: 10px;
  }
}

<div class="container transform">
  <div class="box">
    Transform
  </div>
</div>
<div class="container recalc">
  <div class="box">
    Prop changes
  </div>
</div>