css - CSS 3：文本旋转错误？

Question

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

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

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/

Answer 2

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

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

在您的情况下，您需要：

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