rotateとpositionの関係

rotateとpositionの関係について質問致します。
rotateをしない場合⇒left:0; top:10px;の場合、header-burgerInlineの左上からrelativeを指定しているheader-burgerまでの距離になります。

では、rotateを45deg等に指定している場合は上記と同じくheader-burgerInlineの左上からheader-burgerまでの距離になるのでしょか？それともheader-burgerInlineの中心からheader-burgerまでの距離になるのでしょうか？
どこからheader-burgerまでの距離になるのでしょうか？

ご回答いただければ幸いです。

コードは例として以下の通りです。

html
1<button id="js-toggle" class="header-burger" aria-label="menu">
2          <span class="header-burgerInline"></span>
3          <span class="header-burgerInline"></span>
4        </button>

scss
1      .header-burger {
2        display: block;
3        width: 26px;
4        height: 26px;
5        position: relative;
6        .header-burgerInline {
7          display: block;
8          position: absolute;
9          left: 0;
10          width: 26px;
11          height: 4px;
12          background-color: #3e3e3e;
13          border-radius: 4px;
14          &:nth-child(1) {
15            top: 10px;
16            transform: rotate(45deg);
17          }
18          &:nth-child(2) {
19            top: 10px;
20            transform: rotate(-45deg);
21          }
22        }
23      }