javascript - 如何使元素从其转换后的形式中获取位置

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