CSS：旋转 90 度导航并坚持到左上角答案

【问题标题】：CSS: Rotate 90 deg nav and stick to top left cornerCSS：旋转 90 度导航并坚持到左上角
【发布时间】：2020-08-18 04:19:45
【问题描述】：

我想让我的导航旋转 90 度并卡在视口的左上角，如下图所示：

代码：

<div style="width:100vh; height:100px; display:flex; align-items:center; justify-content:space-around; background-color:#CCC; position:fixed; top:0px; left:0px; ">
            <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>

【问题讨论】：

这能回答你的问题吗？ How can I rotate an HTML <div> 90 degrees?
出于原则，我只会在以下条件之一为真时提供答案：a）您展示了最少的研究工作或 b）您删除了内联样式。
如果内联样式有助于创建MRE，则没有任何问题。
@kmoser，我从来没有说过这是错误的（尽管它是错误的，因为我们打开了主题 - 尝试编写内联的响应 CSS，对于初学者）。我只是说，除非其中一个条件为真，否则我不会回答。他们是否想从我这里得到答案是他们的选择。

标签： html css

【解决方案1】：

你需要：

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

如图所示：https://stackoverflow.com/a/14233398/378779

【讨论】：

【解决方案2】：

这应该可行

<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>

【讨论】：

【解决方案3】：

您可以使用 CSS transform 属性将导航栏旋转 90°。下面的代码也去掉了内联样式。

nav {
  width: 100vh;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #CCC;
  position: fixed;
  top: 0px;
  left: 0px;
  
  /* rotate 90° */
  transform: rotate(90deg);
}

.link {
  font-size: 20px;
  color: red;
}

<nav>
  <span class="link">LINK</span>
  <span class="link">LINK</span>
  <span class="link">LINK</span>
  <span class="link">LINK</span>
  <span class="link">LINK</span>
</nav>

【讨论】：

【解决方案4】：

span {
 writing-mode:sideways-lr;
 display:block;
 padding:calc(100px / 2 - 8px);
 font-size:20px;
 color:red;
}
body{
 background-color:blue;    
}

<div style="width:108px; height:100%;background-color:#fff;display:block;margin:-8px;outline-offset:-6px;outline: 1px solid red;">
            <span >LINK</span>
            <span >LINK</span>
            <span >LINK</span>
            <span >LINK</span>
            <span >LINK</span>
        </div>

【讨论】：