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/

Answer 2

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

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

在您的情况下，您需要：

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

CSS 3：文本轮换错误？

2 个答案: