CSS 3 : text rotation bug?

Question

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

比如可以看到here , 旋转的文本永远不会在你想要的正确位置，

right: 0;
bottom: 0;

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

我该如何解决这个问题？

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

谢谢。

Answer 1

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

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

http://jsfiddle.net/PQ3Ga/