CSS「変換：回転（）」：

Question

私は非常に私はそれを示すことができるだけでなく、それを説明するのか分からない恐怖（適切に揃えるない）「絶対位置」との全体的な設計に影響を与えます。だから私はセットアップしましたthis Fiddle.

ご覧のとおり、ナビゲーションメニューはどこにあるべきではありません。これは、ヘッド要素の下端と左端に正確に設定する必要があります。私。 bottom: 0およびleft: 0。しかし、私は-90degsの回転を設定することだし、それはnav要素の絶対位置は、回転が存在していなかったかのように元の要素の回転や、おそらくかなり前に起こっていることは明らかです。

擬似要素:beforeと:afterを使って試してみましたが、それを解決できるかどうかを試しました。しかし、私はこれらの疑似要素の理解を得ることはできません。いずれの場合も、回転はバイパスされた。 （それがあるべき場所を回転させず、nav要素は明らかにそれ自体を位置決めする。）

これは基本的にコードされ：ファンシー

<div id="head"> 
    <div id="title">My Web</div> 
    <nav> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About Me</a></li> 
      <li><a href="#">Something Else</a></li> 
      <li><a href="#">Blog</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</div> 

なし。

そして、これはCSS（この問題には関係それの部分）である：

#head { 
    position: relative; 
} 
nav { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    transform: rotate(-90deg); 
} 
nav a { 
    display: inline-block; 
    padding: 0 9px; 
} 

それが働いている方法：そこyou can see this in the Fiddle project.

ホープ誰かが私に手を与えることができます。

---

P.S。また、ときどき、の垂直要素間の距離は、<a>タグ内のテキストのサイズに応じて、わずかにのように増加し、半分のピクセルの場合と同様に境界がぼやけているように見えます。ちょうど4文字以上と<a>要素の1のスペースでYou can see this in this other version。これがなぜ違いがあるのか​​理解できません。しかし、それは起こると、メニューはかなり悪く見えます！

Answer 1

nav要素は、異なる幅と高さを持っているためです。デフォルトでは要素はその中心で回転しますので、navの場合、回転後のこのブロックの角は一致しません。この問題を解決するには、回転ポイントを移動するプロパティーをtransform-orginに設定して、変換前後の左下隅が同じ場所になるようにします。あなたのケースでは、transform-origin: 75px 75px;（独立<a>長さの作品）です。

Here's the fiddle

は、残念ながらそれは、変換をサポートして物事を回転させる独自の方法を使用していないこれらのブラウザとしてIE8-のための問題を解決することはできません。

Answer 2

あなたのNAVにおけるULのパディングのようです。微調整しようと

のnav ulの{パディング左：0; }

（ChromeのDEV-ツールが不足している最後の1または2のピクセルを見つけるためにあなたを助けるかもしれない、ULのパディングを見つけるために私を助けた。）