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

css hml div full height，文本旋转90°并以div为中心

1 个答案: