Safari浏览器和Chrome浏览器，旋转文本的位置去干扰

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> 

能正常工作在所有浏览器（与WebKit的）除了Safari和Chrome的地方文本显示比其他浏览器低约90px。

为了防止这种情况我也补充说：

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

现在的文本在所有浏览器正确的地方，但这个感觉不对我...我失去了一些东西在这里？

我讨厌加入浏览器异常代码，它往往会回来咬你从长远来看...：○

问候， 安德斯

Answer 1

改变这一行：

-webkit-transform: rotate(90deg); 

到

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

如你所知，这条线仅用于由WebKit的浏览器（Safari浏览器，Chrome浏览器）

你可能有玩弄确切的PX数字，但你可以摆脱额外的@media屏幕标签。

Answer 2

查找到transform-origin。基本上，你应该可以做transform-origin: 0 0;（当然有所有的前缀），它会把旋转钩住左上角，这听起来像你想要的。