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内に入るようにスパンを翻訳する必要もあります。