How to Rotate and Postion an Element on the Top Left or Top Right Corner

css3 rotate top and left co-ordinates

First you need to set the origin of rotation to top-left and the rotate,

$("#child").css({
            "-webkit-transform-origin": "top left",
            "-moz-transform-origin": "top left",
            "-o-transform-origin": "top left",
            "transform-origin": "top left",
            "transform" : "rotate("+ angle +"deg)"
        });

This will rotate the element around its (top, left) point.

But as you described in your case, you need the div to be always in top,left you need to do some math with bounds of the div.

you can get the bounds using document.getElementById(ele).getBoundingClientRect();

Then you need to get the bounds of the div before and after it was rotated. Apply the math logic based on the current angle. Find the code here for your reference.

$(function(){
    $("#child").draggable();
    var angle = 0;
    $("#btn1").click(function(){
        angle = angle + 90;
        if(angle == 360) { angle = 0 }
        // reset top left position to (0,0)
        $("#child").css({"top": "0px", "left": "0px"});
        var preBounds = getBounds("child");
        $("#child").css({
            "-webkit-transform-origin": "top left",
            "-moz-transform-origin": "top left",
            "-o-transform-origin": "top left",
            "transform-origin": "top left",
            "transform" : "rotate("+ angle +"deg)"
        });
        var currBounds = getBounds("child");

        if(angle == 90)
        {
         $("#child").css({ "left": currBounds.left+Number(preBounds.left-currBounds.left)+"px"});
        }
        else if(angle == 180)
        {
         $("#child").css({ "top": currBounds.top+Number(preBounds.top-currBounds.top)+"px","left":currBounds.width+"px"});
        }
        else if(angle == 270)
        {
         $("#child").css({ "top": currBounds.height+"px"});
        }
  });


});

function getBounds(ele){
    var bounds = document.getElementById(ele).getBoundingClientRect();
    console.log(bounds);
    //{left:bounds.left, top:bounds.top,  right:bounds.right, bottom:bounds.bottom}
    return bounds;
}

Check the fiddle of the same. Hope it helps

Rotate div 90 degrees and position fixed in the upper left corner

So I manage to position it the way you want, no matter how big your content is using position: absolute; for your .inner-div.

The only drawback is that your text is facing downwards and not upwards. Couldn't get around that issue with my CSS :S

If you -webkit-transform: rotate(180deg); the child of .inner you can turn the text the right way up :)

.outer {  position: fixed;  left: 20px;  top: 20px;  background: red;}
.inner {  position: absolute;  bottom: 100%;  -webkit-transform: rotateZ(90deg);  transform-origin: 0 100%;  background: #AACAD7;  white-space: nowrap;;}.rotate {  -webkit-transform: rotate(180deg);}ul { list-style: none; padding: 0; margin: 0; white-space: nowrap; }ul li { padding: 5px 10px; }

<div class="outer">  <div class="inner">    <ul class="list rotate">      <li class="item">lasange | spaghetti</li>    </ul>  </div></div>

<div style="position:absolute;transform: rotate(90deg); 
transform-origin:bottom left;">12</div>
<div style="position:absolute;transform: rotate(90deg); 
transform-origin:bottom left;">1234</div>
<div style="position:absolute;transform:rotate(90deg); 
transform-origin:bottom left;">1234567</div>
<div style="position:absolute;transform:rotate(90deg); 
transform-origin:bottom left;">9876545</div>
<div style="position:absolute;transform:rotate(90deg); 
transform-origin:bottom left;">12345678910654</div>