JavaScrript transformで回転させるが思うようにいかない

Question

プログレスバーのようなものを作っていて、それの縦バージョンを作っています
下記を実行すると上から下にゲージが溜まるような動作になるのですが
rotateを使って下から上に溜まるように見えるにはどうしたらいいのでしょうか？

<style>
body,html{
  height:100%;
}
.bar{
  height: 100%;
  animation: bar-animation 1 2s;
  background: #0091EA;
}
@keyframes bar-animation{
  0%{
    height: 0%;
  }
  100%{
    height: 100%;
  }
}
</style>

<script>
window.onload=function(){
div=document.createElement("div");
div.style.width="5%";
div.style.height="100%";
document.body.append(div);

div2=document.createElement("div");
div2.style.height="100%";
div2.style.maxHeight="70%";
div2.classList.add("bar");
div2.style.transform="rotate(180deg)";
div.appendChild(div2);
}
</script>

Answer 1

回転じゃなくてbottomを固定すればよいのでは？
wrap要素にも属性が必要です

<style>
body,html{
  height:100%;
}
.bar{
  bottom:30%;
  position:absolute;
  width:100%;
  animation: bar-animation 1 2s ;
  background: #0091EA;
animation-fill-mode:forwards;
}
@keyframes bar-animation{
  0%{
    height: 0%;
  }
  100%{
    height: 100%;
  }
}
</style>

<script>
window.onload=function(){
div=document.createElement("div");
div.style.width="5%";
div.style.height="100%";
div.style.position="relative";
document.body.append(div);

div2=document.createElement("div");
div2.classList.add("bar");
div.appendChild(div2);
}
</script>

Answer 2

div2ではなくdivにrotate()をかけるのが意図なんじゃないでしょうか。