CSS3：创建一个旋转270度的垂直导航

Question

我正在尝试创建一个旋转270度的垂直导航栏（以便链接向上而不是向上）。我遇到的麻烦是我需要一个固定宽度（200px）和每个链接相同高度522px。当我应用高度时，它不会在一条线上下降并且奇怪地定位。

任何帮助都会很棒。

这是我想尝试做的事情：

JSFiddle：https://jsfiddle.net/q8j1y0w8/1/

<div class="main">
<ul class="nav">
    <li class="nav1"><a href="#">Nav 1</a></li>
    <li class="nav2"><a href="#">Nav 2</a></li>
    <li class="nav3"><a href="#">Nav 3</a></li>
    <li class="btn"><a href="#">Btn</a></li>
</ul>
<div class="content">CONTENT</div>

Answer 1

此解决方案将使代码接近设计图像。它涉及更新CSS并重新排序HTML以生成所需的结果。

更新了Jsfiddle：https://jsfiddle.net/q8j1y0w8/9/

CSS

使用CSS变换旋转元素时，渲染的宽度将变为可见高度。

对于ul.nav元素，width设置为1666px，相当于菜单项的总和＆＃39;个人身高：522px + 522px + 522px + 100px。这将为导航提供足够的可见高度，以包含所有元素而不会溢出。

.nav {
    width: 1666px; /* 522 + 522 + 522 + 100 = 1666 */
}

然后通过设置CSS宽度来为每个菜单项指定适当的高度：

li {
    width: 100px;
}
li.nav1, li.nav2, li.nav3 {
    width: 522px;
}

HTML

菜单项会像这样重新排序，因为旋转意味着从左到右的项目定位为从上到下。

<li class="btn"><a href="#">Btn</a></li>
<li class="nav3"><a href="#">Nav 3</a></li>
<li class="nav2"><a href="#">Nav 2</a></li>
<li class="nav1"><a href="#">Nav 1</a></li>

注释

在jsfiddle中，我设置了ul.nav以获得绝对位置，而body没有边距以允许滚动页面，因此可以检查整个导航栏。