CSS 3 : text rotation bug?

我不了解CSS3中文本旋转的工作原理。

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

right: 0;
bottom: 0;

它将始终在右边具有间隙/边距。并始终超出包含它的框的底部。

我怎样才能解决这个问题？

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

谢谢。

最佳答案

当您意识到可以通过...控制旋转点时，放置文本并不是很困难。

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位于其父框的旁边，底部对齐。然后，将左下 Angular 指定为“旋转点”，瞧!完全控制您的文字定位。

http://jsfiddle.net/PQ3Ga/

关于CSS 3 : text rotation bug?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6215784/