html - 如果我有两个相同的元素，一个缩放到 2 倍，如何缩小它的内部元素并将其放置在 1 倍的位置？

Question

我有两个相同的元素。最上面的一个，我正在缩放以将尺寸扩大一倍，然后以正常尺寸的尺寸为中心。然后我希望它的内部元素按比例缩小到正常大小，并准确放置在正常大小元素的内部元素所在的位置。

这似乎是不可能的。位置的缩放+平移似乎没有逻辑。

我该怎么做？

https://jsfiddle.net/0urdrvao/

HTML:

<div class="top">
  <div class="inner">
    Inner
  </div>
</div>

<div class="bottom">
  <div class="inner">
    Inner
  </div>
</div>

CSS:

body, html
{
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}
.top,
.bottom
{
  position: relative;
  top: 0px;
  left: 0px;
  width: 300px;
  height: 300px;
  background-color: gray;
  z-index: 0;
}

.top
{
  position: fixed;
  transform-origin: 0 0 0;
  transform: translate(-150px, -150px) scale(2);
  opacity: .5;
  z-index: 1;
}

.inner
{
  position: relative;
  top: 20vh;
  left: 0px;
  width: 100px;
  height: 40px;
  background-color: red;
}

.top .inner
{
  /* This doesn't work */
  transform: translate(150px,150px) scale(.5);
  /* This also doesn't work (doing half)*/
  /*transform: translate(75px,75px) scale(.5);*/
  /* This also doesn't work (doing double)*/
  /*transform: translate(300px,300px) scale(.5);*/
  transoform-origin: 0 0 0;
  background-color: yellow;
}

Answer 1

由于 top: 20vh 将缩放 2 倍，因此变换原点应为 0 -20vh。

当反转缩放/平移时，您需要向后并从缩放开始，然后是平移

.top{
  position: fixed;
  transform-origin: 0 0;
  transform: translate(-150px, -150px) scale(2);
  opacity: .5;
  z-index: 1;
}

.top .inner{
  transform: scale(.5) translate(150px, 150px);
  transform-origin: 0 -20vh;
  background-color: yellow;
}

Updated fiddle

或者可以这样做，将原点设置为 0 0 和 transform: scale(.5) translate(150px,150px) translateY(-20vh);

Updated fiddle