Как повернуть текст и сделать его родительский Div действовать динамически

Я создал выдвижную вкладку сбоку страницы. Он работал нормально, когда я использовал фоновое изображение в качестве текста. Сейчас я пытаюсь просто использовать CSS. Я бы хотел, чтобы текст перевернулся на 90 градусов. Когда я делаю это через

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

текст вращается соответствующим образом. Это родительский div, однако, остается, как если бы текст не был повернут. Как сделать так, чтобы родительский div изменял размер к повороту текста? Я подумал, пытаясь отобразить встроенный блок, но это не сработало. Я попытался повернуть родительский div вместо текста, и это открыло новую банку с червями. Вот скрипка, показывающая перевернутый текст. Если вы наведите курсор мыши, вкладка выдвинется. https://jsfiddle.net/aLo5egpx/

Источник

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>
Источник
Другие вопросы по тегам