In what manner, rotation is 90 degrees here? - html

Question

In the code below, the button with close id, is rotated 90 degrees. But I don't get how that button moved 90 degrees and with respect to what origin. transform-origin: top left; But top left of what element?
body {
margin: 0;
}
.circle-container {
position: fixed;
top: 100px;
left: 100px;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
/* border-radius: 50%; */
position: relative;
transition: transform 0.5s linear;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
top: 60%;
transform: rotate(90deg);
transform-origin: top left;
}
<script src="https://kit.fontawesome.com/e057ae8bc6.js"></script>
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"></i>
</button>
</div>

Answer 1

Ok, I got it. The top-left is of that button's top-left. I button has been stretched vertically by using height property as well as pushed from the top using absolute positioning. I got confused because, in my mind, I was viewing button element as having an equal size of icon element inside.