Rotate div 90 degrees and position fixed in the upper left corner

Question

This is what I'm trying to accomplish:

I want to have a navigation that will be rotated 90 deegres and fixed to the upper left corner of the window.

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

I can't get it to look like in the image above. The problem is with the rotation. The inner div is positioned and then rotated, and as a result ends up outside the outer div. No matter what I put as the origin of the transformation it doesn't work the way I want it to. I've tried positioning the inner div with position: absolute but with no luck. I don't know the height/width parameters of the menu list.

Here's a fiddle: https://jsfiddle.net/949cjcnq/7/

Any help would be greatly appreciated.

Best regards, Paul

Answer 1

So I manage to position it the way you want, no matter how big your content is using position: absolute; for your .inner-div.

The only drawback is that your text is facing downwards and not upwards. Couldn't get around that issue with my CSS :S

If you -webkit-transform: rotate(180deg); the child of .inner you can turn the text the right way up :)

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