上一篇: css – 选择h之后p的所有首次出现下一篇:css – 如何使用引导程序调整每行...

CSS 3：文本轮换错误？

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了CSS 3：文本轮换错误？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

http://jsfiddle.net/PQ3Ga/