0

对于我正在制作的网站，我想要一个漂亮的旋转“导航”栏，只是页面顶部的简单链接。

我得到的代码：

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>

这使得文本在元素的顶部聚集在一起。理想情况下，我希望它位于元素的底部，

4

3 回答 3

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;
}

演示 ​</p>

于 2012-10-01T17:19:02.677 回答
0

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

于 2012-10-01T17:10:34.827 回答
0

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

演示

于 2012-10-01T17:19:28.160 回答