javascript - 将旋转的子 div 粘贴到父级的底部

Question

我正在尝试将旋转的文本从顶部粘贴到父 div 到底部，问题是由于它是一个旋转元素，我无法将其准确居中到父级的底部，请查看下面的演示理解我的观点。任何帮助将不胜感激
demo

.parent {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.section-title {
  float: left;
  position: sticky;
  transform-origin: 0% 0;
  transform: rotate(-90deg) translateX(-111%) translateY(0);
  font-size: 5em;
  line-height: 100%;
  font-weight: 600;
  top: 0;
  text-align: left;
  -webkit-transform-origin: 0% 0;
  -ms-transform-origin: 0% 0;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.content div {
  background-color: green;
  height: 500px;
  width: 500px;
}

.content.two {
  z-index: -1;
}

.content.two div {
  background-color: red;
  height: 500px;
  width: 500px;
}

<div class="parent">
  <div class="content two">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<div class="parent">
  <div class="section-title"> section title </div>
  <div class="content">
    <div></div>
    <div></div>
  </div>
</div>

<div class="parent">
  <div class="content two">
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Answer 1

使用 writing-mode反而:

.section-title {
  float: left;
  position: sticky;
  font-size: 5em;
  line-height: 100%;
  font-weight: 600;
  top: 0;
  text-align: left;    
  /* rotate the text */
  writing-mode: tb;
  transform: scale(-1);
  /* don't take any space*/
  width: 0;
}

.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
}

.content div {
  background-color: green;
  height: 500px;
  width: 500px;
}

.content.two div {
  background-color: red;
}

<div class="parent">
    <div class="content two">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <div class="parent">
    <div class="section-title"> section title </div>
    <div class="content">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>

  <div class="parent">
    <div class="content two">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>