Safari和Chrome浏览器中，旋转文本的位置混乱

Question

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

我在页面上有一些旋转的文本，并使用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

敬礼， 安德斯

- Anders

Answer 1

将此行更改为：

-webkit-transform: rotate(90deg);

为了

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

如您所知，这行代码仅适用于Webkit浏览器（Safari、Chrome）。

您可能需要尝试一些具体的像素数值来调整，但是之后您就可以省略多余的@media screen标签了。

- JumpingJezza

Answer 2

看一下transform-origin。基本上，你应该能够做到transform-origin: 0 0;（当然要加上所有的前缀），它会将旋转钩子挂在左上角，听起来就像是你想要的。

- visualidiot

---

@Anders 是的，它可以。就像 visualidiot 所说，你必须插入前缀。-webkit-transform-origin: 0 0; 可以正常工作。 - honk31