text moving out of the element using transform rotate
css, html, vertical-alignment
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.
Problem
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.