Question

I have twisted the text to a 270 degree angle. my problem is aligning it inside another div.

Here is the image before I twisted the text:

enter image description here

and this is my my code for that for this:

#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>

and when I add this class to the div with id text_here that will twist the text the image below will be the result

.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);
}

enter image description here

How do I make this be inside the square?

Thank you.

Was it helpful?

Solution

You need to use transform-origin:0 0; on your CSS to set the rotation axis on the top left of your div. By default, it is set at 50% 50%, and you can set it to any value you like.

OTHER TIPS

If i got it........ Try this

.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);
} 

after that it will look like below enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top