1

CSS のローテーションとポジショニングに問題があります。

Web ページのタイトルを横向き (-90° 回転するため、左から右 -> 下から上) にして、Web ページの右下隅に貼り付けたいと思います。

これまでに使用した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 は絶対に配置する必要があります。transform-origin を気にせずにこれを達成する唯一の方法です!

于 2013-05-20T16:11:31.180 に答える