如何使用 CSS 旋轉導航欄中的元素？

Question

我試圖讓我的導航欄在我的 WordPress 網站中旋轉，但無法實現將其居中並關閉到屏幕左側。

這是我現在得到的截圖：

這是我正在使用的代碼 CSS：

nav.standard {
    position: fixed;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

Answer 1

這是一種干凈的方法，可以將其粘貼在頁面的一側。

相關位的逐行細分（下面的完整現場演示）：

/* fix the bar */
position: fixed;
/* since we're rotating, set its width to the screen height */
width: 100vh;
bottom: 0;
/* push our bar into the screen by its height (2em) */
right: 2em;
line-height: 2em;
/* rotate 90deg clockwise */
transform: rotate(90deg);
/* use the bottom-right as rotation point */
transform-origin: 100% 100%;

 .nav { list-style: none; margin: 0; padding: 0; text-align: center; white-space: nowrap; position: fixed; width: 100vh; bottom: 0; right: 2em; line-height: 2em; transform: rotate(90deg); transform-origin: 100% 100%; } .nav li { display: inline-block; margin: 0 1em; }

 <ul class="nav"> <li>Page 1</li> <li>Page 2</li> <li>Page 3</li> <li>Page 4</li> </ul>

Answer 2

您可以使用writing-mode: vertical-lr; 結合transform: rotate(180deg); .

 body { background-color: #eee; } nav.standard { position: absolute; left: 0; top: 0; bottom: 0; text-align: center; -webkit-writing-mode: vertical-lr; -moz-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; writing-mode: vertical-lr; transform: rotate(180deg); background-color: #FFF; } nav.standard a { color: #333; text-decoration: none; display: inline-block; padding: 0.8em 0.4em; font-size: .75rem; }

 <nav class="standard"> <a href="#">— Home</a> <a href="#">— About</a> <a href="#">— Portfolio</a> <a href="#">— Contact</a> </nav>