CSS 旋转并定位到页面左下角

我试图将 div 放置在窗口的左下角，以便它始终卡在那里。但它应该包含从下向上阅读的文本，如图所示。pic 1 https://i.stack.imgur.com/k4PGN.jpg

我尝试过这种样式：

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

但是div的位置是这样的：

pic 2 https://i.stack.imgur.com/Is2Zj.jpg

这里的秘密是转换包含文本的元素而不是文本本身。but use transform-origin设置元素变换的适当点。

首先，我们将元素放置在屏幕的左下角。

然后我们将元素设置为从左上角开始变换...将其向后旋转 90 度but我们还必须将其 100% 翻译回原来的内容height（令人困惑，但那是因为旋转）。

因为该元素是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 演示 http://jsfiddle.net/wxwftxnk/3/（文字较长）