将旋转的子 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 {

  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>