如何旋轉文本並讓它的父級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

是。這很好。謝謝！那麼，是它的顯示：使它工作的包裝的內聯塊？ – 2015-04-01 03:51:57

要打開文本，是inline-block和wrapper div。：通過使用垂直邊界的機制將父元素拉伸到一個正方形之後。然後，轉換的翻譯選項會抖動文本以使其居中。 – 2015-04-01 13:56:17

如何旋轉文本並讓它的父級Div動態地動作

回答

相關問題