css3：文本旋转错误？

我不明白CSS3中的文本旋转是如何工作的

例如，您可以看到，旋转的文本永远不会在您想要的正确位置

right: 0;
bottom: 0;

它将始终具有右侧的间隙/边距。并且总是在包含它的盒子底部溢出

我怎样才能解决这个问题

我可以使用jquery来修复它，或者使用任何可靠的jquery插件来进行文本旋转吗

---

谢谢。

在CSS中定位旋转文本非常困难。您必须记住，该位置在文本旋转之前生效。如果删除示例中的旋转，您将看到未旋转的文本已正确定位

要正确定位旋转文本，必须计算旋转将如何影响位置…然后在样式表中更正该位置

在您的情况下，您需要：

position: absolute;
right: -11px;
bottom: 9px;

---

当您意识到可以通过以下方式控制旋转点时，定位文本并不是很困难

transform-origin: 0 0 || top left

在您的特定情况下，其工作原理如下：

.year
{
    display: block;
    writing-mode: tb-rl;
    -webkit-transform: rotate(270deg);
    -webkit-transform-origin: bottom left;   
    -moz-transform: rotate(270deg);
    -moz-transform-origin: bottom left; 
    -o-transform: rotate(270deg);
    -o-transform-origin: bottom left; 
    -ms-transform: rotate(270deg);
    -ms-transform-origin: bottom left; 
    transform: rotate(270deg);
    transform-origin: bottom left;  
    font-size: 24px; 
    position: absolute;
    right: -50px; /*.year width*/
    bottom: 0;
    border: 1px solid #000000; 
}

如果进行转换，您会注意到。year位于其父框的旁边，底部对齐。然后指定左下角为“旋转点”，瞧！对文本定位的绝对控制

---

在您第一次查看之前，通常认为CSS中的某些内容是一个bug是不明智的。此外，值得注意的是，转换的默认来源是

50%50%

，因此OP的小提琴中显示的行为。+1。昨天，我试着用

变换原点

来解决这个问题。我完全忘了你可以设置像左下角那样的值，所以我无法计算出来。顺便问一下，我怎样才能让它在IE上工作？它似乎对IE不起作用（刚刚测试过）。。。谢谢什么版本？在IE9下，你需要使用（我意识到我参加聚会有点晚了…）有没有办法在不知道

.year

的宽度的情况下做到这一点？