html - 向右浮动一个固定的 div 并旋转它

Question

我正在尝试旋转这个 div，修复它并像这样 [jsbin.com/ujebik/1][1] 将其浮动到右侧，但它并没有完全浮动到右侧

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 
}

更新：

想要这个：

但是有这个：

Answer 1

尝试添加 transform-origin: 100% 100%; 使 div 围绕其右下角而不是其中心旋转（http://jsbin.com/iniweq/2/）

Answer 2

我猜你想要做的是在左边有元素？如果是这种情况，那么您需要将 CSS 更改为

 .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 
  }

这是一个小提琴：http: //jsfiddle.net/Er3yL/

或者，如果您想说的是您想将其“浮动”到极右，那么我猜测 .logo 的父元素没有拉伸到 100% 的窗口。您可以更正它，或者如果您想保持这种状态，那么您可以在右边添加一个负值，就像这样

 .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 
  }