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

Question

我试图将div放置在窗口的左下角，以使其始终卡在此处。但它应包含从下向上读取的文本，如该图片所示。图片1

我尝试过这种样式：

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

但是div的位置是这样的：

图片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演示（带有更长的文字）