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;