css rotate ( from a certain point )

Just a quick note on how this works.

I wanted to stick a div against the right of the page ( with abit of fixed positioning ), then rotate it so it was 90 degrees (sitting nice and flush against the right).

But when I did it ( just with rotate it rotates about the center of the div, meaning it is abit out in the middle of the page ).

This is because the rotation is about the middle point of the thing ( the green div in this case ).

transform-origin to the rescue:

I rotated it using the point right top , to get it like this:

 

Here’s the code and what it would like if I rotated it only 10 degrees to illustrate abit better how this works.

 

<div class="stuck_to_right_and_rotated">
    <a>
        some link
    </a>
   
</div>

.stuck_to_right_and_rotated {
    position: fixed;
    top: 60%;
    right:0;    
    transform: rotate(10deg);
    
/* use the top right of div (before any rotation) as the origin of the transform */
    transform-origin: right top; 
}



.stuck_to_right_and_rotated a {
    background-color: green;
    color: white;
    padding: 5px;

}