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.
text moving out of the element using transform rotate [duplicate]
-
14-10-2022 - |
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:
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);
}
How do I make this be inside the square?
Thank you.
Solution
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
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow