旋转后定位 div

Question

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

所以我创建了一个高度和宽度与我需要的相反的 div，然后我旋转了它。 问题是我在将它正确定位在我想要的地方时遇到了问题。 （上：0 右：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>