Question

对于我正在制作的网站，我希望有一个很好的旋转＆＃34;导航＆＃34;吧，只是页面顶部的简单链接。

我得到的代码：

div.home
{
position: absolute;
top: 0px;
left: 700px;
height: 150px;
width: 40px;
background-color: #313131;
-webkit-transform: rotate(45deg);
margin-top: -36px;
text-transform: rotate(45deg);
}

和

<div class="home">
Home
</div>

这使得文本成为元素的顶部。理想情况下，我希望它位于元素的底部，

Answer 1

我不知道你想要什么，但这些可能很有用

<div class="home">
  <div class="text">    
    Home
  </div>
</div>

div.home
{
 position: absolute;
 top: 30px;
 left: 700px;
 height: 150px;
 width: 40px;
 background-color: #313131;
 -webkit-transform: rotate(45deg);
 margin-top: -36px;
 -webkit-text-transform: rotate(90deg);
}
.text{
  margin-top:100px;
 font-size:26px;
 -webkit-transform: rotate(-90deg);
 color:white;
}

DEMO

Answer 2

不要转换文字。 transform（以及-ms-transform，-webkit-transform等等）包括用它旋转文本并在新位置接收鼠标事件。

Answer 3

我不知道这是否正是您遇到的问题，但将top值更改为'30px'。

Demo

如何让文本很好地坐在旋转的div元素中

3 个答案: