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

Question

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

任何帮助都会很棒。

这是我想尝试做的事情：

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，相当于菜单项各个高度的总和：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 设置为没有边距以允许滚动页面，以便可以检查整个导航栏。

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

CSS3: Creating a vertical nav that is rotated 270deg

html

css

transform

nav

CSS

HTML

备注