使用变换旋转移出元素的文本

Question

我把文字扭曲成270度角。我的问题是将它与另一个div对齐。

这是我扭曲文字之前的图像：

这是我的代码：

#infoside {
    background-color: #00ff00;
    float: right;
    height: 100%;
    width: 41%;
}

#tabbings {
    float: left;
    width: 15%;
    height: 100%;
    background-color: #ffff00;
}
#tab_panels {
    float: right;
    width: 85%;
    height: 100%;
    background-color: #00ffff;
}

#client_info {
    height: 100px;
    width: 100%;
}


 <div id="infoside">
    <div id="tabbings">
        <div id="client_info" class="active_tabbing">
            <div id="text_here" style="width: 100px; height: 25%; text-align: center">
                 CLIENT INFO
            </div> 
        </div>
        <div class="clear"></div>
    </div>
    <div id="tab_panels"></div>
    <div class="clear"></div>
</div>

当我将这个类添加到id为 text_here 的div时会扭曲文本，下面的图片将是结果

.twist_text {
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg) ;
    -o-transform: rotate(270deg) ;
    -ms-transform: rotate(270deg) ;
    transform: rotate(270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

如何让它在广场内？

谢谢。

Answer 1

您需要在CSS上使用transform-origin:0 0;来设置div左上角的旋转轴。默认情况下，它设置为50% 50%，您可以将其设置为您喜欢的任何值。

Answer 2

如果我拿到它........ 试试这个

.twist_text {
    -moz-transform: rotate(270deg) translateX(-35px);
    -webkit-transform: rotate(270deg) translateX(-35px) ;
    -o-transform: rotate(270deg) translateX(-35px) ;
    -ms-transform: rotate(270deg) translateX(-35px) ;
    transform: rotate(270deg) translateX(-35px);
} 

之后它将如下所示