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

Question

我试图将旋转的文本从顶部滚动到父级 div 再到其底部，问题是由于它是一个旋转元素，我无法将其精确地居中于父级的底部，请检查下面的演示来理解我的观点。任何帮助将不胜感激

演示

.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 {&nbsp; float: left;&nbsp; position: sticky;&nbsp; font-size: 5em;&nbsp; line-height: 100%;&nbsp; font-weight: 600;&nbsp; top: 0;&nbsp; text-align: left;&nbsp; &nbsp;&nbsp;&nbsp; /* rotate the text */&nbsp; writing-mode: tb;&nbsp; transform: scale(-1);&nbsp; /* don't take any space*/&nbsp; width: 0;}.content {&nbsp; display: grid;&nbsp; grid-template-columns: 1fr 1fr 1fr 1fr;&nbsp; grid-gap: 5px;}.content div {&nbsp; background-color: green;&nbsp; height: 500px;&nbsp; width: 500px;}.content.two div {&nbsp; background-color: red;}<div class="parent">&nbsp; &nbsp; <div class="content two">&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="parent">&nbsp; &nbsp; <div class="section-title"> section title </div>&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; </div>&nbsp; </div>&nbsp; <div class="parent">&nbsp; &nbsp; <div class="content two">&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; &nbsp; <div></div>&nbsp; &nbsp; </div>&nbsp; </div>