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链接

谢谢你。

拉克什曼。

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 example 已更改font-size（ ~~height，line-height~~ ）和padding （只是为了看它是如何工作的）。

更新：我删除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;
}

屏幕左下角的文字

3 个答案: