css hml div全高與文本在90°旋轉並居中在一個div

Question

我試圖展開文本到所有高度的綠色div並居中垂直。這是一個例子：example

HTML：

<div class="willSlide" id='content'></div> 
<div class="willSlide" id='btn'> 
    <span class="click">CLICK THIS IS A VERY VERY VERY VERY VERY LONG TEXT</span> 
    <span class="expandedTxt">Expanded! THIS IS A VERY VERY VERY LONG TEXT</span> 
</div> 

CSS：

#content{ 
    position:fixed; 
    height:100%; 
    background:rgb(97, 97, 97); 
    width:200px; 
    right:0px; 
    margin-right: -200px; 
} 
#btn{ 
position: fixed; 
width: 30px; 
height: 100%; 
right: 0px; 
background: rgb(117, 231, 117); 
text-align: center; 
padding: 40px 0; 
cursor:pointer 
} 
.click{ 
    display:block; 
    transform: rotate(-90deg); 
} 
.expandedTxt{ 
    display:none; 
    transform: rotate(-90deg); 
} 
#btn.expanded .expandedTxt{ 
display:block 
} 
#btn.expanded .click{ 
display:none 
} 

也有一些JQuery的動畫... 什麼錯誤或如何實現這一目標？

Answer 1

你的問題是，一旦旋轉的跨度的寬度變成高度，並且是30px。您需要修復.click和.expandedTxt的寬度以適應文本。您還需要翻譯跨度，以便起點位於.willslide div內。