CSS Sideways 文本卡在页面的一 Angular

Question

我在 CSS 旋转和定位方面遇到了一些问题。

我想将网页的标题横向放置(旋转 -90°，因此它从左到右 -> 从下到上阅读)并贴在网页的右下角。

这是我目前使用的 CSS:

.gallerytitle {
    position:absolute;
    bottom: 0px;
    top: 0px;
    height: 90%;
    z-index: -1;
    width: 120px;
    margin-right: 0px;
    border: 1px #fff solid;
    }

.gallerytitletext {
    font: 120px Helvetica, Arial, sans-serif; 
    color: #008aff;
    position:relative;
    right:0px;
    bottom:0px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

(.gallerytitletext 是 .gallerytitle 中的一个 div)

我试图弄乱 transform-origin 属性，但到目前为止我还没有成功。

有没有更好的方法来实现这个？使用 transform-origin 执行此操作是真正的 PITA。我尝试了一百种不同的配置，但无法将文本设置到正确的位置。

感谢您的帮助!

Answer 1

如果有人想实现类似的东西 - DIV 必须绝对定位。这是实现这一目标的唯一方法，而无需为 transform-origin 的东西烦恼!