CSS вращается и позиция слева внизу страницы

Question

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

Я попробовал этот стиль:

-ms-transform: rotate(270deg); /* IE 9 */ 
    -webkit-transform: rotate(270deg); /* Safari */ 
    transform: rotate(270deg); 
    position:fixed; 
    left:0; 
    bottom:0; 

Но ДИВ позиция так:

pic 2

Answer 1

Секрет состоит в том, чтобы преобразовать элемент, который содержит текст, а не текст сам .. , но использовать transform-origin, чтобы установить соответствующую точку, по которой элемент преобразуется.

Сначала мы позиционируем элемент в левом нижнем углу экрана.

Затем мы устанавливаем элемент для преобразования из верхней левой точки ... повернуть его назад на 90 градусов но мы должны перевести его обратно на 100% его собственной высота (запутанным, но это из-за вращения).

Поскольку элемент position:fixed, он будет усаживаться до размера содержимого.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.wrap { 
 
    background: rebeccapurple; 
 
    color: white; 
 
    border: 1px solid grey; 
 
    padding: .25em; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    transform-origin: top left; 
 
    transform: translateY(100%) rotate(-90deg); 
 
}

<div class="wrap"> 
 
    <p>Lorem ipsum dolor sit amet.</p> 
 
</div>

JSfiddle Demo (с более длинным текстом)