Why can't I move this div after rotating?-CodePudding

I have a <div> that I would like rotated and moved all the way to the left (like when using left:0). I have been able to rotate it so that my text is sideways as I want it, but it should be moved to the left of the screen.

I have tried using left:0 but it seems to do nothing.

My HTML is as follows :

<div id="Menu" style="">This is a test. This text should be on the left side of the page.</div>

And my CSS is...

#Menu
{
width:100vh;
height:2vw;
background-color:#336699;
transform: rotate(-90deg);
}

What am I missing in order to move this to the left side of the screen? I have created a jsfiddle in order to demonstrate this further. https://jsfiddle.net/px0sabgr/

CodePudding user response：

You need to change the transform origin to the left-center, and include a translate in the X direction with a value of -100%.

#Menu {
  width: 100vh;
  height: 2vw;
  background-color: #336699;
  transform-origin: left center;
  transform: rotate(-90deg) translateX(-100%);
}

<div id="Menu" style="">This is a test. This text should be on the left side of the page.</div>

CodePudding user response：

I think you just need an extra translateX along with a transform-origin property.

html,
body {
  margin: 0;
}

#menu {
  width: 100vh;
  background-color: #336699;
  transform-origin: top left;
  transform: rotate(-90deg) translateX(-100%);
}

<div id="menu">This is a test. This text should be on the left side of the page.</div>