Question

我试图在窗口的左下角放置一个div，所以它总是卡在那里。但它应包含从底部向上读取的文本，如此图所示。 pic 1

我尝试过这种造型：

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

但div是这样的位置：

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（文字较长）

CSS旋转并位于页面左下角

1 个答案: