Navbar 및 CSS 회전

Question

내 WordPress 웹 사이트에서 내 navbar를 회전하려고하지만 화면 중앙으로 이동하여 닫을 수 없습니다. ..

이 깨끗한 알고 또는 더 나은 또 다른 옵션이 사용하고 있지만하지는 코드 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

당신은 transform: rotate(180deg);와 함께 writing-mode: vertical-lr;를 사용할 수 있습니다.

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>