サファリとクロム、回転したテキストの位置はひよこになります

Question

よく、私はここで私の質問に対する答えを見つけますが、今度は私はここで私の最初のものを尋ねます！ :)

は、私は自分のページにいくつかの回転されたテキストを持っており、それが位置使用して配置されている：以下のような絶対に、：

.rotate-box .rotate-text{ 
    display: block; 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
    position: absolute; 
    left: -45px; 
    top: 170px; 
} 

<div class="rotate-box"> 
    <span class="rotate-text">Rotated text</span> 
</div> 

これはSafariやChromeの以外（のWebKitとの）すべてのブラウザで正常に動作しますテキストは他のブラウザより約90px低く表示されます。これを防止するために

私が追加しました：

@media screen and (-webkit-min-device-pixel-ratio:0){ 
    .rotate-text {top: 80px !important;} 
} 

は今、テキストはすべてのブラウザで正しい場所にあるが、これは私に右に感じることはありません...私はここで何かが足りないのですか？私はそれが...戻ってきて、長期的にはあなたを噛まないように傾向があり、ブラウザの例外コードを追加嫌い

：

よろしく、 アンダース

Answer 1

変更この行：あなたが知っているように

-webkit-transform: rotate(90deg) translate(-100px, 16px); 

へ

-webkit-transform: rotate(90deg); 

、このラインは唯一のWebKitブラウザ（サファリ、クローム）で使用され

あなたはおそらく必要があります正確なピクセル数で遊ぶことができますが、余分な@media画面タグを取り除くことができます。

Answer 2

Oがtransform-originに見て。基本的には、transform-origin: 0 0;（すべてのプレフィックス付き）を実行できるはずです。また、回転は左上に引っ掛かります。