在 html/css 中正确翻译缩放容器

Question

所以一开始我将蓝色容器的高度和宽度设置为 25px 并将其转换到绿色容器的右上角我简单地将 x 转换为 100-25=75px 并且它工作正常，

<div id="app" style="margin: 20px">
  <div
    style="
      position: absolute;
      height: 300px;
      width: 300px;
      background-color: red;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: green;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 25px;
      width: 25px;
      background-color: blue;
      transform-origin: center center;
      transform: translateX(75px);
    "
  ></div>
</div>

现在我想用比例来实现同样的效果。我将蓝色容器的高度和宽度设置为 40px，并将其缩放为 0.625，这基本上将蓝色容器的高度和宽度设置为 25px，如上所示。但是现在当我想翻译它时，我不能用上面的值翻译，即 75px。我尝试将蓝色容器放回左上角并再次尝试转换为 75px 但它仍然不起作用，

<div id="app" style="margin: 20px">
  <div
    style="
      position: absolute;
      height: 300px;
      width: 300px;
      background-color: red;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: green;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 40px;
      width: 40px;
      background-color: blue;
      transform-origin: center center;
      transform: scale(0.625) translateX(-15px) translateY(-15px)
        translateX(75px);
    "
  ></div>
</div>

Answer 1

平移然后缩放并将原点设置为 top right

<div id="app" style="margin: 20px">
  <div
    style="
      position: absolute;
      height: 300px;
      width: 300px;
      background-color: red;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: green;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 40px;
      width: 40px;
      background-color: blue;
      transform-origin: top right;
      transform:translate(60px) scale(0.625);
    "
  ></div>
</div>

或如下所示 (96 = 60/0.625)

<div id="app" style="margin: 20px">
  <div
    style="
      position: absolute;
      height: 300px;
      width: 300px;
      background-color: red;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: green;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 40px;
      width: 40px;
      background-color: blue;
      transform-origin: top right;
      transform:scale(0.625) translate(96px); 
    "
  ></div>
</div>

更新

没有transform-origin（30% = ((1-0.625)/2)/0.625) * 100%)

<div id="app" style="margin: 20px">
  <div
    style="
      position: absolute;
      height: 300px;
      width: 300px;
      background-color: red;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 100px;
      width: 100px;
      background-color: green;
    "
  ></div>
  <div
    style="
      position: absolute;
      height: 40px;
      width: 40px;
      background-color: blue;
      transform:translate(60px) scale(0.625) translate(30%,-30%);
    "
  ></div>
</div>

在 html/css 中正确翻译缩放容器

Correctly translate a scaled container in html/css

html

css

transform