Javascript 旋转后将文本放入div容器中

目前，我正在尝试设计一种按钮，当鼠标悬停在它上面时，它将显示网站左侧的一段文本

然而，正如你所看到的，我的问题是，在旋转文本的div容器-90度，然后文本本身+90度来平衡它之后，文本退出屏幕，我似乎找不到一种方法来修复它，并使其适合div的蓝色区域

HTML:

您可以使用和

flex

模型来避免处理转换： （最小高度可选，此处演示用途）

.wrap2{
显示：内联flex；
对齐项目：居中；
最小高度：90vh；/*？你需要那种东西吗*/
背景：浅蓝色；
边距：0 1米
}
.text2{
最大宽度：0；
溢出：隐藏；
转换：1s
}
.轮换{
宽度：300px；
}
.左{
写入方式：垂直rl；
宽度：1米；
;
背景：浅蓝色；
填充物：1em 0.5em；
边界半径：01.5em1.5em0；
右边距：-2米
}
.wrap2:hover.text2{
最大宽度：300px；
}

洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum dolor sit amet）是一位杰出的职业球员。这是一种临时的生活方式`在此处输入代码“Suspendisse sapien augue，imperdiet id nisl sit amet，eleifend前庭metus”。多奈克发酵剂和发酵剂。

洛勒姆

删除.wrap2上的负边距并添加以下属性位置：相对；最高：20%；使用witting模式调整顶部，仅在旋转90180度或270度时回答此问题，而不是关于如何在旋转后调整文本的一般问题rotating@raquelhortab这就是问题所在，90度。但ndeed写作模式不是关于设计轮换，而是关于文本的分层方式

<div class="wrap2">
 <div class="text2">
  <p class="rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc ornare volutpat ante vitae tempor. `enter code here`Suspendisse sapien augue, imperdiet 
id nisl sit amet, eleifend vestibulum metus. Donec fermentum et arcu ut 
bibendum.
   </p>
</div>
 <div class="left">Lorem</div>
  </div>

        .wrap2 {
        margin: -270px 0 0 -170px;
        width: 330px;
        height: 0;
        padding: 0 12px 12px 12px;
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .text2 {
        width: 330px;
        height: 0;
        font-size: 18px;
        opacity: 0.5;
        color: #434343;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        text-align: center;
        background: #C6F6FF;
        transition: 1s all;
        font-family: 'Josefin Slab', serif;
        overflow: hidden;
        color: rgba(67, 67, 67, 1);
    }

    .left {
        width: 120px;
        font-family: 'Josefin Slab', serif;
        transition: 1s all;
        opacity: 0.5;
        color: #434343;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 30px;
        padding: 7px 5px 0 5px;
        margin: 0 auto;
        background: #C6F6FF;
        font-size: 26px;
        color: rgba(222, 232,, 1);
        text-align: center;
    }

    .wrap2:hover .text2 {
        height: 140px;
        opacity: 1;
    }

    .wrap2:hover .left {
        opacity: 1;
    }

    .rotate {
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }