我不明白
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位于它的父框旁边,底部对齐.然后你指定左下角是“旋转点”,瞧！绝对控制文本定位.
