如何創建一個固定的垂直導航？

Question

下面是一個例子。 http://rsvp-paris.com/正如你所看到的，他們的運輸方式是旋轉的，位於每邊的兩端。這是我做過什麼：

.vertical{ 
    transform: rotate(90deg); 
    transform-origin: left top 0; 
    position: fixed; 
} 

但是我使用的是基礎，所以事情變得有點古怪，當我縮放屏幕朝下。我只想要一行簡單的垂直文本，它固定在屏幕右側的中間。

Answer 1

您可以使用組合的rotate() + translate()它transform值。

jsFiddle

.vertical { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    transform: rotate(90deg) translate(50%, 0); 
 
    transform-origin: top right; 
 
    position: fixed; 
 
    top: 50%; 
 
    right: 0; 
 
} 
 
.vertical li:first-child { 
 
    border: 1px solid; 
 
}

<ul class="vertical"> 
 
    <li>Item One</li> 
 
    <li>Item Two</li> 
 
    <li>Item Three</li> 
 
</ul>