Float right a fixed div and rotate it - html

Question

I am trying to rotate this div, fix it and float it to the RIGHT like this [jsbin.com/ujebik/1][1] but it don't completely float to the RIGHT
HTML:
<div class="logo">
ROTATE THIS TEXT
</div>
CSS:
.logo {
position: fixed;
top: 20px;
right: 0;
z-index: 100;
width: 250px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
font-size:20px;
background-color:green
}
UPDATE:
want this:
but Have this:

Answer 1

Try to add transform-origin: 100% 100%; to make the div rotate around its lower right corner instead of its center (http://jsbin.com/iniweq/2/)

Answer 2

I am guessing what you are trying to do is have the element on the left? If this is the case then you need to change your CSS to
.logo {
position: fixed;
top: 20px;
left: 0;
z-index: 100;
width: 250px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
font-size:20px;
background-color:green
}
Here is a fiddle: http://jsfiddle.net/Er3yL/
Or if what you are trying to say is that you want to 'float' it to the extreme RIGHT, then I am guessing that the parent element for .logo is not stretched to 100% of the window. Either you can correct that or if you want to keep it that way then you can add a negative value to right, like this
.logo {
position: fixed;
top: 20px;
right: -20px;
z-index: 100;
width: 250px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
font-size:20px;
background-color:green
}