Question

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

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();实际上并未改变元素＆＃39; DOM中的大小。相反，它将该元素放在一个单独的图层上，在GPU侧改变其大小，然后使用该图层显示您的元素，同时保留您的元素＆＃39;原始位置和尺寸。如果您检查该元素，您会看到其边界框（以蓝色标出）与屏幕上实际不同。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: