Eu quero simular as propriedades detransform-origin usandotransform: translate em CSS.

De acordo com a MDN, isso é muito possível:

Essa propriedade é aplicada primeiro convertendo o elemento pelo valor negado da propriedade, aplicando a transformação do elemento e, em seguida, convertendo pelo valor da propriedade.

No entanto, quando tento, obtenho resultados incorretos. Esses dois retângulos claramente não são os mesmos:

.origin {
  transform-origin: 100px 100px;
  transform: translate(100px, 0px) scale(2) rotate(45deg);
}

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

.box {
  background-color: red;
  width: 100px;
  height: 100px;
}

.container {
  float: left;
  margin: 100px;
  width: 250px;
  height: 250px;
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="container">
  <div class="box origin">
  </div>
</div>

<div class="container">
  <div class="box translate">
  </div>
</div>

Já tentei procurar a resposta sem sorte há algum tempo e, em minha opinião, deve ser relativamente simples, simplesmente não consigo descobrir.