我有一個& ltdiv & gt我希望旋轉(zhuǎn)并移動到最左邊(就像使用left:0時一樣)。我已經(jīng)能夠旋轉(zhuǎn)它，以便我的文本是橫向的，因為我想要它，但它應(yīng)該被移動到屏幕的左邊。

我已經(jīng)嘗試使用左:0，但它似乎沒有什么作用。

我的HTML如下:

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

我的CSS是...

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

為了將它移到屏幕的左側(cè)，我遺漏了什么？為了進(jìn)一步演示這一點，我創(chuàng)建了一個jsfiddle。https://jsfiddle.net/px0sabgr/

您需要將變換原點更改為左中心，并在X方向包含一個值為-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>

我認(rèn)為你只需要一個額外的translateX和一個transform-origin屬性。

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>