CSS rotate and position to bottom left of page

Question

I am trying to position a div at the bottom left of a window so it is always stuck there. But it should contain text that reads from the bottom upwards, as shown on this pic. pic 1

I have tried this styling:

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

But the div is position like this:

pic 2

Answer 1

The secret here is to transform the element that contains the text and not the text itself..but use transform-origin to set the appropriate point about which the element transforms.

First we position the element at the bottom left of the screen.

Then we set the element to transform from the top left point...rotate it back 90 degrees but we also have to translate it back 100% of it's own height (confusing but that's because of the rotation).

Because the element is position:fixed it will shrink-wrap to the size of the contents.

* {
  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 (with longer text)