текст в левом нижнем углу экрана

Question

Я хочу сохранить имя моего портала в левом нижнем углу окна браузера в вертикальном направлении.

Ниже приведен стиль css, который я использую, но текст идет с пометкой слева, а бит текста также обрезается.

.rotate { 
     -webkit-transform: rotate(-90deg); 
     -moz-transform: rotate(-90deg); 
     -ms-transform: rotate(-90deg); 
     -o-transform: rotate(-90deg); 
     filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
     font-size:60px; 
     position: fixed; 
     left: 0; 
     bottom: 0; 
    } 

Может кто-то помочь в исправлении моего класса css, пожалуйста.

вот JSFiddle ссылку

спасибо.

lakshman.

Answer 1

Попробуйте это:

.rotate { 
 
    transform-origin:0% bottom; 
 
    -moz-transform-origin:0% bottom; 
 
    -webkit-transform-origin:0% bottom; 
 
    -o-transform-origin:0% bottom; 
 
    -ms-transform-origin:0% bottom; 
 
    transform:rotate(-90deg) translateY(100%); 
 
    -moz-transform:rotate(-90deg) translateY(100%); 
 
    -webkit-transform:rotate(-90deg) translateY(100%); 
 
    -o-transform:rotate(-90deg) translateY(100%); 
 
    -ms-transform:rotate(-90deg) translateY(100%); 
 
\t display: block; 
 
\t writing-mode: tb-rl; 
 
\t position: fixed; 
 
    left:0; bottom:0; 
 
\t margin: auto; 
 
    font-size:60px; 
 
    background-color:lightblue; 
 
}

<div class="rotate"> 
 
    LeftBottom 
 
</div>

Если Вы меняете font-size, а затем изменить height и line-height тоже. Вы можете добавить padding тоже, но тогда вам не нужны изменения height и line-height (только если font-size изменен).

Существует fiddle example с измененными font-size ( height, line-height ) и padding (просто чтобы посмотреть, как это работает).

UPDATE: Я сделал изменения, удалил height и line-height. Вот и в скрипке пример. Он работает лучше.

Answer 2

Посмотрите на это обновление jsfiddle, когда вы поворачиваете текст, он делает это из середины div, поэтому, когда его -90 градусов и в нижней части экрана часть div будет вращаться под окном.

.newRotate { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    font-size:70px; 
    position: fixed; 
    left: -100px; 
    bottom: 110px; 
} 

Чтобы облегчить это, я изменил левый и нижнее положение

Answer 3

Вы можете попробовать это и посмотреть, если его то, что вы ищете.

.rotate { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    font-size:60px; 
    position: fixed; 

    left: -80px; 
    bottom: 90px; 
}