旋转后定位 div

Question

我想制作一个包含 3 个文本的 div，将其旋转并放置在页面上的固定位置。我希望它完全适合屏幕尺寸，

所以我创建了一个 div，其高度和宽度与我需要的相反，然后我旋转了它。问题是我在将它正确定位在我想要的位置时遇到了问题。 (顶部:0 right:40px)

这是我尝试移动 div 的代码。

.page {
  width: 100%;
  heigth: 100%;
  background-color: #fefefe;
}
.green-band {
  height: 90px;
  width: 100vh;
  padding: 0 30px;
  background-color: green;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: rotate(-90deg);
  position: fixed;
  top: 0;
  right: 40px;
}

<div class="page"></div>
<div class="green-band">
  <div class="text-inside">Text 1</div>
  <div class="text-inside">Text 2</div>
  <div class="text-inside">Text 3</div>
</div>

你能帮我弄清楚如何正确定位 div 吗？

Answer 1

.page {
  width: 100%;
  heigth: 100%;
  background-color: #fefefe;
}
.green-band {
  height: 90px;
  width: 100vh;
  padding: 0 30px;
  background-color: green;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateX(calc(100% - 40px)) rotate(-90deg);
  transform-origin: bottom left;
  position: fixed;
  bottom: 0;
  right: 0;
}

<div class="page"></div>
<div class="green-band">
  <div class="text-inside">Text 1</div>
  <div class="text-inside">Text 2</div>
  <div class="text-inside">Text 3</div>
</div>

旋转后定位 div

positioning div after it has been rotated

html

javascript

css

jquery

positioning