Safari 和 Chrome，旋转文本的位置失控答案

【问题标题】：Safari and Chrome, position of rotated text goes haywireSafari 和 Chrome，旋转文本的位置失控
【发布时间】：2012-03-07 12:58:29
【问题描述】：

嗯，我通常在这里找到我的问题的答案，但这次我没有，所以我现在要在这里问我的第一个问题！ :)

我的页面上有一些旋转的文本，它使用 position:absolute 定位，如下所示：

.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，它们的文本显示比其他浏览器低约 90 像素。

为了防止这种情况，我添加了：

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

现在文本在所有浏览器中都位于正确的位置，但我觉得这不对...我在这里遗漏了什么吗？

我讨厌添加浏览器异常代码，从长远来看，它往往会回来并咬你... :o

问候，安德斯

【问题讨论】：

标签： html css rotatetransform

【解决方案1】：

改变这一行：

-webkit-transform: rotate(90deg);

到

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

如您所知，此行仅由 webkit 浏览器（Safari、Chrome）使用

您可能不得不使用精确的 px 数字，但随后您可以摆脱额外的 @media 屏幕标签。

【讨论】：

【解决方案2】：

查看transform-origin。基本上，您应该能够执行transform-origin: 0 0;（当然，带有所有前缀），它会将旋转挂钩到左上角，这听起来像您想要的。

【讨论】：

@Anders 是的，确实如此。正如visualidiot所说，您必须插入前缀。 -webkit-transform-origin: 0 0; 工作正常..