DIV旋转90度和位置固定在左上角

Question

这就是我要完成的：

我想有一个将被旋转90个deegres固定在导航窗口的左上角。

HTML：

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

CSS：

.outer { 
    position: fixed; 
    left: 20px; 
    top: 20px; 
    background: red; 
} 

.inner { 
    -webkit-transform: rotate(-90deg); 
    transform-origin: 0 0; 
    background: green; 
} 

我不能让它看起来像上面的形象。问题在于旋转。内部div被定位然后旋转，结果在外部div之外结束。无论我把什么作为转型的起源，它都不会像我希望的那样工作。我试图用position: absolute定位内部div，但没有运气。我不知道菜单列表的高度/宽度参数。

这里有一个小提琴：https://jsfiddle.net/949cjcnq/7/

任何帮助将不胜感激。

最好的问候，保罗

Answer 1

所以我管理你所希望的方式放置它，无论多么大的内容正在使用position: absolute;为您的.inner -div。

唯一的缺点是您的文字朝下， 不是以上。无法避开与我的CSS这个问题：S

如果-webkit-transform: rotate(180deg);的.inner孩子，你可以把文本了正确的方式:)

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

Answer 2

我想你想要做的是移动从内旋转到外类。你的CSS应该是这样的：

.outer { 
    -webkit-transform: rotate(-90deg); 
    position: fixed; 
    left: 20px; 
    top: 80px; 
    background: red; 
} 

.inner { 
    background: green; 
} 

要使文本旋转后并排显示，使用一个表将工作比使用列表更好：

<div class="outer"> 
    <div class="inner"> 
     <table class="list"> 
      <tr> 
       <td class="item">lasange</td> 
       <td class="item"> | </td> 
       <td class="item">spaghetti</td> 
      <tr> 
     </table> 
    </div> 
</div> 

工作小提琴：https://jsfiddle.net/949cjcnq/12/

Answer 3

尽管你为角度或旋转选择了不幸的东西，但如果不知道你的项目的宽度，你不能这样做，因此我不认为它可以在没有扩展框架的情况下在纯CSS/CSS3中完成。因此，解决这一点，你将需要使用一些JavaScript，并获得该元素的计算宽度，适当地改变转型：

var inner = document.querySelectorAll('.inner')[0]; 
var width = inner.offsetWidth; 
inner.style.transform = "translateY("+width+"px) rotate(-90deg)"; 

保持transform-origin: 0 0，因为这将有元素的顶部到屏幕的边缘。然后，我们只需要在由宽度Y方向平移，这将会把该元素在左上角：

Fiddle Example

Answer 4

在在下面的代码片段中，您会看到我删除了outer和inner html，并旋转了整个UL -90deg。结果是您的示例图像。另外适当的造型是你;-)征求意见

见片段：

/* {outline: 1px dotted red } /* for debugging */ 
 

 
ul, li { list-style-type: none; padding: 0; margin: 0 } 
 

 
ul { height: 1; /* 1 x line-height */ 
 
    position: relative; 
 
    float: left; 
 
    padding: 0 6px; 
 

 
    /* would be regular without transform */ 
 
    top: 20px; left: 20px; 
 

 
    /* but transform-origin now pivots around 
 
    top-right so UL element gets moved right. 
 
    So left position needs correction: 
 
    left = -1 x (total width of LI's + line-height + UL margin-LR + UL padding-LR) + wanted-left-margin */ 
 
    top: 20px; left: -134px; /* (optically estimated) */ 
 
} 
 

 
li { 
 
    display: inline; /* result is horizontal menu */ 
 
} 
 

 
.list { 
 
    transform: rotate(-90deg); /* removed -webkit-*/ 
 
    transform-origin: top right; 
 
    background: #acc9d7; 
 
}

<ul class="list"> 
 
    <li class="item">lasange | </li> 
 
    <li class="item">spaghetti</li> 
 
</ul>

Answer 5

您可以添加一个平移X（-100％）到您的转换，将其设置您想

.outer { 
 
    position: fixed; 
 
    left: 20px; 
 
    top: 20px; 
 
    background: red; 
 
} 
 

 
.inner { 
 
    -webkit-transform: rotate(-90deg) translateX(-100%); 
 
    transform: rotate(-90deg) translateX(-100%); 
 
    transform-origin: 0 0; 
 
    background: green; 
 
} 
 

 
.list { 
 
    margin-top: 0px; 
 
}

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