Correctly translate a scaled container in html/css - html

Question

So at first I set the blue container's height and width to 25px and to translate it to the top right corner of the green container I simply translate x to 100-25=75px and it works fine,
<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>
Now I want to achieve the same with scale. I set height and width of blue container to 40px and I scale it to 0.625 which basically sets the height and width of blue container to 25px like above. However now when I want to translate it I can't translate with the above value i.e. 75px. I tried putting the blue container back to top left and again tried translating to 75px but it still doesn't work,
<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

Translate then scale and set the origin to be 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>
Or like below (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>
UPDATE
without 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>