ビューポート（ウィンドウの高さ）の垂直方向に回転されたdivs

Question

ページの両側に1つずつ、fixed個のdivがあります。

私はそれらを90度回転させて管理しました。

に私はそれらを得ることができません。

また、私は、テキストコンテンツの制御を持っていないので、私はむしろ、セット幅を持っていないと思いますが...、1行に滞在するテキストを取得するためのdivのためwidthを定義する必要がありました

.nav-previous, .nav-next { 
 
    position:fixed; 
 
    top: 0; bottom: 0; 
 
} 
 

 
.nav-previous { left: 0px; } 
 
.nav-next { right: 0px; } 
 

 
.nav-previous a, .nav-next a { 
 
    display: inline-block; 
 
    position: absolute; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    width: 300px; 
 
    font-size: 1.25em; 
 
    color: #383838; 
 
    margin: 0; padding: 20px; 
 
} 
 

 
.nav-previous a { 
 
    right: 0; 
 
    transform-origin: top right; 
 
    transform:rotate(-90deg);  
 
} 
 

 
.nav-next a { 
 
    left: 0; 
 
    transform-origin: top left; 
 
    transform:rotate(90deg); 
 
}

<div class="navigation"> 
 
    <div class="nav-previous"><a href="#">previous</a></div> 
 
    <div class="nav-next"><a href="#">next</a></div> 
 
</div>

jsFiddle：https://jsfiddle.net/azizn/3hq6xgL4/

Answer 1

これはどのようだ - 私は、テキストを中央にtranslateを使用しています

/* this vertically centres the containers */ 
 
.navigation .nav-previous, 
 
.navigation .nav-next { 
 
    display:inline-block; 
 
    position:fixed; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
/*this moves the links onto the screen (after the translating and rotating is done*/ 
 
.navigation .nav-previous { left: 20px; } 
 
.navigation .nav-next { right: 20px; } 
 

 
.navigation .nav-previous a, 
 
.navigation .nav-next a { 
 
    display: inline-block; 
 
    text-align: center; 
 
    text-transform: uppercase; 
 
    letter-spacing: 1px; 
 
    font-size: 1.25em; 
 
    color: #383838; 
 
    margin: 0; 
 
    padding: 20px; 
 
    transform-origin: center;  
 
} 
 

 
.navigation .nav-previous a{ 
 
    transform: translate(-50%, 0) rotate(90deg); /* move left 50% before rotating*/ 
 
} 
 
.navigation .nav-next a { 
 
    transform: translate(50%, 0) rotate(90deg); /* move right 50% before rotating*/ 
 
} 
 

 
/* styles below to show it is centered */ 
 
html, 
 
body {height:100%; padding:0; margin:0;} 
 
body:after {content:''; height:50%; background:blue; display:block;}

<div class="navigation"> 
 
    <div class="nav-previous"><a href="3">previous</a></div> 
 
    <div class="nav-next"><a href="#">next</a></div> 
 
</div>