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

これがまさにあなたが問題を抱えているものかどうかはわかりませんが、top値を のようなものに変更してください'30px'。

デモ

于 2012-10-01T17:19:28.160 に答える
0

テキストを変換しないでください。transform(および など-ms-transform)-webkit-transformにはテキストの回転が含まれ、新しい位置でマウス イベントを受け取ります。

于 2012-10-01T17:10:34.827 に答える