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属性，但到目前为止我还没有成功。

有没有更好的方法来实现这一目标？用变换原点来做这个真正的PITA。我尝试了一百种不同的配置，我无法将文本设置到正确的位置。

感谢您的帮助！

Answer 1

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

CSS Sideways文本卡在页面的角落

1 个答案: