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除外，其中文本的显示速度比其他浏览器低约90px。

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

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

现在所有浏览器中的文字都在正确的位置，但这对我来说感觉不对...我在这里错过了什么？

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

此致安德斯

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;（当然还有所有前缀），它会将旋转挂钩到左上角，这听起来像你想要的。

Safari和Chrome，旋转文本的位置变得混乱

2 个答案: