1

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

谢谢你的帮助 ！

4

1 回答 1

1

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

于 2013-05-20T16:11:31.180 回答