将div旋转90度并将位置固定在左上角

Question

这就是我想要完成的事情:

我想要一个旋转90度的导航并固定在窗口的左上角.

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之外.无论我把它作为转变的起源,它都不会像我想要的那样发挥作用.我已经尝试过定位内部div position: absolute而没有运气.我不知道菜单列表的高度/宽度参数.

这是一个小提琴: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>