Javascript 旋转后定位div

我想做一个有3个文本的div，旋转它并把它放在页面上的一个固定点上。我希望它完全适合屏幕的大小

所以我创建了一个div，它的高度和宽度与我需要的正好相反，然后我旋转了它。问题是，我无法将它正确定位在我想要的位置。（顶部：0右侧：40px）

这是我试图移动div的代码

.page{
宽度：100%；
高度：100%；
背景色：#fefe；
}
.绿带{
高度：90px；
宽度：100vh；
填充：0 30px；
背景颜色：绿色；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
变换：旋转（-90度）；
位置：固定；
排名：0；
右：40px；
}

文本1
文本2
文本3

.page{
宽度：100%；
高度：100%；
背景色：#fefe；
}
.绿带{
高度：90px；
宽度：100vh；
填充：0 30px；
背景颜色：绿色；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
变换：translateX（计算（100%-40px））旋转（-90度）；
变换原点：左下角；
位置：固定；
底部：0；
右：0；
}

文本1
文本2
文本3

尝试更改

左侧

和

变换原点

属性。感谢您的回复。不幸的是，尽管垂直位置似乎是正确的，但div与地面的距离不是40pxright@baband，我已更新了答案以说明这一点