CSS 3: ошибка поворота текста? - PullRequest
Новая
       32

CSS 3: ошибка поворота текста?

7 голосов
/ 02 июня 2011

Я не понимаю, как вращение текста работает в CSS3.

Например, вы можете видеть это здесь , повернутый текст никогда не будет в нужном месте, как вы хотите, 

right: 0;
bottom: 0;

это всегда будет иметь пробел / поле справа. и всегда выходить за пределы нижней части окна, в котором он находится.

Как я могу это исправить?

Могу ли я использовать jquery, чтобы исправить это, или любой надежный плагин jquery для поворота текста?

Спасибо.

Ответы [ 2 ]

19 голосов
/ 03 июня 2011

Позиционирование текста не очень сложно, когда вы понимаете, что можете контролировать точку поворота через ... 

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/

2 голосов
/ 02 июня 2011

Позиционирование повернутого текста в CSS очень сложно. Вы должны помнить, что позиция вступает в силу, прежде чем текст будет повернут. Если вы удалите вращение в своем примере, вы увидите, что не повернутый текст расположен правильно.

Чтобы правильно расположить повернутый текст, необходимо рассчитать, как вращение повлияет на положение ..., а затем исправить это положение в таблице стилей.

В вашем случае вам нужно: 

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