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

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

-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/

источник

2015-03-31 taylor_man

<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>

источник

2015-03-31 20:27:43

Yup. Это отлично работает. Спасибо! Итак, это дисплей: встроенный блок обертки, который заставляет его работать? –

Чтобы включить текст, да встроенный блок и обертка div. После: растягивает родительский элемент на квадрат с помощью механики вертикальных полей. И тогда опция трансформирования переводит текст, чтобы он был центрирован. –

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

ответ

Смежные вопросы