如何旋转文本并使其父项 Div 动态执行

Question

我从页面的侧面创建了一个滑出式标签。当我使用背景图像作为文本时，它工作正常。现在我尝试只使用 CSS。我希望文字旋转 90 度。当我通过

执行此操作时

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

文本适当旋转。但是，它的父级 div 保持文本未旋转时的状态。如何让父 div 调整大小以适应文本的旋转？我想尝试显示内联块，但没有 work.I 尝试旋转父 div 而不是文本，这打开了一个新的蠕虫罐头。这里有一个 fiddle 显示文本已翻转。如果将其悬停，选项卡会滑出。 https://jsfiddle.net/aLo5egpx/

Answer 1

<html>
  <head></head>
  <body>
  <div id="slideout">
    <div class="slideoutWrap"><div class="slideoutTxt">Avantages offerts par<br>les Grands Lacs</div></div>
    <div id="slideout_inner">
        <h3>Avantages offerts par les Grands Lacs</h3>
            <p>Les caractéristiques et les systèmes naturels des Grands Lacs et du fleuve Saint-Laurent comme l'eau, les rivières, les forêts, les insectes, les poissons et la faune sont des éléments importants pour des communautés en santé. Ils jouent un rôle dans l'économie ontarienne, car ils permettent la création de technologies écologiques innovatrices et nous aident à nous adapter aux effets imprévisibles du changement climatique.</p>
            <p>Les Grands Lacs et le fleuve Saint-Laurent aident à recycler et à purifier l'eau que nous buvons, à absorber les déchets que nous produisons et à tempérer notre climat. Ils sont également une source de nourriture, de combustibles et d'abris. Ils nous permettent de faire des activités récréatives, lesquelles favorisent la santé physique et mentale. La région incite un large éventail de gens de partout dans le monde à vivre, à travailler et à s'amuser en Ontario.</p>
    </div>
</div>

</body>



<style>
#slideout
  {
    position: fixed;
    top: 150px;
    left:0;
    background-color:#6DBBDF;
    transition-duration: 0.3s;
    border-radius: 0 5px 5px 0;
    z-index:1000;
    padding:5px;
  }
.slideoutWrap
  {
    display: inline-block;
    overflow: hidden;
    width: 2.5em;
  }
.slideoutTxt
  {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    display: inline-block;
    color: #FFF;
    text-align:center;
    white-space: nowrap;
    -ms-transform: translate(35%,10%) rotate(90.0deg);  /* IE9+ */
    -webkit-transform: translate(35%,10%) rotate(90.0deg);  /* Safari 3.1+, Chrome */
    transform: translate(35%,10%) rotate(90deg);
    -ms-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    line-height: 1.5;
  }
.slideoutTxt:after
  {
    content: "";
    display: block;
    margin: -.5em 0 100% ;
  }

#slideout_inner
  {
    position: fixed;
    top: 150px;
    left: -650px;
    width:600px;
    background-color:#00457c;
    background-repeat: repeat-x;
    background-position: left top;
    transition-duration: 0.3s;
    border-radius: 0 0 5px 0;
    z-index:1000;
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
  }

#slideout:hover {
  left: 650px;
}
#slideout:hover #slideout_inner {
  left: 0;
  box-shadow:         4px 4px 8px 0px rgba(50, 50, 50, 0.64);
}
#slideout_inner p{ color:#ffffff; }

</style>



</html>

如何旋转文本并使其父项 Div 动态执行

How to Rotate Text and have it's Parent Div act Dynamically

css

rotatetransform