Html CSS：将导航旋转90度，并保持在左上角

我想让我的导航旋转90度并固定在视口的左上角，如我在下面绘制的草图所示：

代码：

链接 链接 链接 链接 链接 你需要：

transform: rotate(-90deg) translate(-100%, 0);
transform-origin: left top;

如图所示：

这应该是可行的

<div style="background-color:white; 
   height: 100px;
  width: 100%;
  display:flex; 
  align-items:center; 
  justify-content:space-around; 
  transform: rotate(-90deg) translate(-100%, 0);
  border: 1px solid red;
  transform-origin: left top;">
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
            <span style="font-size:20px; color:red;">LINK</span>
        </div>

跨度{ 书写方式：侧边lr； 显示：块； 填充：calc100px/2-8px； 字体大小：20px； 颜色：红色； } 身体{ 背景颜色：蓝色； } 链接 链接 链接 链接 链接 可以使用CSS变换特性将导航栏旋转90°。下面的代码还将删除内联样式

导航{ 宽度：100vh； 高度：100px； 显示器：flex； 对齐项目：居中； 证明内容：周围的空间； 背景色：CCC； 位置：固定； 顶部：0px； 左：0px； /*旋转90°*/ 变换：旋转90度； } .链接{ 字体大小：20px； 颜色：红色； } 链接 链接 链接 链接 链接

---

这回答了你的问题吗？原则上，我只会在以下条件之一为真的情况下提供答案：a您显示最小的研究工作，或b您删除内联样式。如果内联样式有助于创建a，那么它没有错。@kmoser，我从未说过它是错的，尽管它是错的，因为我们打开了主题-尝试编写Response CSS内联，首先。我只是说除非其中一个条件是真的，否则我不会回答。他们想不想从我这里得到答案是他们的选择。