CSS 3：文本旋转错误？ [英] CSS 3: text rotation bug?

问题描述

我不明白CSS3中文字旋转的工作原理。

例如，您可以看到此处，旋转后的文本永远不会在您所需的正确位置，

  right： 0; 
 bottom：0; 
  

它将始终有右侧的空白/边距。

如何解决这个问题？

我使用jquery修复它或任何可靠的jquery插件的文本旋转在那里？

谢谢。

当你意识到你可以通过...控制旋转点时，定位文本并不困难。

  transform-origin：0 0 ||左上
  

在您的具体情况下，它的工作原理如下：

  .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/

I don't understand how text rotation works in CSS3.

For instance, you can see it here, the rotated text is never on the right location as you want it,

right: 0;
bottom: 0;

it will always have the gap/ margin to the right. and always overrun at the bottom of the box that contain it.

How can I fix this?

Can I use jquery to fix it or any reliable jquery plugin for text rotation out there ?

Thanks.

解决方案

Positioning the text is not very difficult when you realize you can control the rotation point through...

transform-origin: 0 0 || top left

In your specific case, it works out like this:

.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; 
}

If you take out the transformation, you will notice that .year is positioned right next to it's parent box, bottom aligned. Then you specify the bottom left corner to be the "rotation point" and voila! Absolute control over your text positioning.

http://jsfiddle.net/PQ3Ga/

这篇关于CSS 3：文本旋转错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！