Drehen von Text in einem festen Div

Question

Ich versuche, ein festes div auf der linken Seite einer Seite, 24px von links und erstreckt sich von oben nach unten auf der Seite. In diesem div werden Navigation und ein Titel sein. Ich versuche, den Titel gedreht -90 Grad und zentriert in Richtung der Unterseite des div zu positionieren.

Es ist schwer, dies herauszufinden. Ich habe mich viele Orte angesehen und kein ähnliches Beispiel gesehen. Ich habe eine Geige mit dem aktuellen Code ein: https://jsfiddle.net/xkLc9xuy/2/

HTML:

<div> 
    <article></article> 
    <footer></footer> 
    <header></header> 
    <nav data-secondary></nav> 
    <nav data-primary> 
    <div>Website Title</div> 
    </nav> 
</div> 

SCSS:

@mixin -position($position:relative, $top:0, $right:0, $bottom:0, $left:0) { 
     position: $position; 
     @if $position !=relative { 
     top: $top; 
     right: $right; 
     bottom: $bottom; 
     left: $left; 
     } 
    } 

    @mixin -transform($transform) { 
     -ms-transform: $transform; 
     -webkit-transform: $transform; 
     transform: $transform; 
    } 

    @mixin -transform-origin($origin) { 
     -ms-transform-origin: $origin; 
     -webkit-transform-origin: $origin; 
     transform-origin: $origin; 
    } 

body{ 
    *:not(script){ 
     margin:0; 
     padding:0; 
     @include -position; 
    } 
    > div{ 
     @include -position(absolute); 
    } 
} 


nav[data-primary]{ 
    box-shadow:0 0 8px rgba(0,0,0,0.5); 
    width:40px; 
    @include -position(absolute, 0, auto, 0, 24px); 
    > div{ 
     white-space:nowrap; 
     height:40px; 
     line-height:40px; 
     background-color:red; 
     @include -transform(rotate(-90deg)); 
     @include -transform-origin(left bottom); 
    } 
} 

Answer 1

Sie auch einen Blick auf writing-mode nehmen kann:

-webkit-writing-mode: vertical-lr; 
    /* old Win safari */ 
    writing-mode: vertical-rl;/*FF*/ 
    writing-mode: tb-lr; 
/* writing-mode:sideways-lr; 
    or eventually scale(-1,-1) untill sideways-lr is working everywhere */ 
    transform: scale(-1, -1); 

https://jsfiddle.net/xkLc9xuy/20/