屏幕左下角的文字

Question

我希望门户的名称保持在垂直方向的浏览器窗口的左下角。

下面是我使用的css样式，但是文本在左边有一个边距，一些文本也被剪掉了。

.rotate {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        font-size:60px;
        position: fixed;
        left: 0;
        bottom: 0;
    }

有没有人可以帮我纠正一下CSS类

这里是JSFiddle链接

谢谢。

lakshman。

Answer 1

试试这个:

.rotate {
    transform-origin:0% bottom;
    -moz-transform-origin:0% bottom;
    -webkit-transform-origin:0% bottom;
    -o-transform-origin:0% bottom;
    -ms-transform-origin:0% bottom;
    transform:rotate(-90deg) translateY(100%);
    -moz-transform:rotate(-90deg) translateY(100%);
    -webkit-transform:rotate(-90deg) translateY(100%);
    -o-transform:rotate(-90deg) translateY(100%);
    -ms-transform:rotate(-90deg) translateY(100%);
	display: block;
	writing-mode: tb-rl;
	position: fixed;
    left:0; bottom:0;
	margin: auto;
    font-size:60px;
    background-color:lightblue;
}

<div class="rotate">
    LeftBottom
</div>

如果你改变了font-size，那么也要改变height和line-height。您也可以添加padding，但随后您不需要更改height和line-height(仅当font-size更改时)

有fiddle例子改变font-size ( height, line-height )和padding(只是为了看看它是如何工作的)。

UPDATE:我通过删除height和line-height进行了更改。这里和小提琴的例子。

Answer 2

看看这个更新的jsfiddle，当你旋转文本时，它会从div的中间旋转，所以当它是-90度时，在屏幕底部的div部分将在窗口下方旋转。

.newRotate {
  -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-size:70px;
    position: fixed;
    left: -100px;
    bottom: 110px;
}

为了缓解这种情况，我改变了左侧和底部的位置

Answer 3

你可以试试这个，看看它是否是你正在寻找的。

.rotate {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    font-size:60px;
    position: fixed;
    left: -80px;
    bottom: 90px;
}