CSS Sideways 文本卡在页面的角落答案

【问题标题】：CSS Sideways text stuck on the page's cornerCSS Sideways 文本卡在页面的角落
【发布时间】：2013-05-12 00:54:58
【问题描述】：

我在 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。我已经尝试了一百种不同的配置，但我无法将文本设置到正确的位置。

感谢您的帮助！

【问题讨论】：

标签： css text rotation transform css-transforms

【解决方案1】：

如果有人想要实现类似的目标 - DIV 必须绝对定位。这是实现这一目标的唯一方法，而无需担心转换起源的东西！

【讨论】：