Rotating Text Navigation (OK)

by Ken Watanabe

HTML

<h2 class="left">
    (1) ATEM Jacques Palminger
</h2>

<h1 class="center">
    DIGITAL<br/>ARCHIVE
</h1>

<nav>
<h2 class="right">
    <a href="#">Info</a>
    <a href="#">Works</a>
    <a href="#">In Flux</a>
    <a href="#">Archive</a>
</h2>

<h2 class="imprint">
    <a href="">(IMPRINT)</a>
</h2>

CSS

html {
    font: normal 80%/1.65 'Akzidenz Grotesk BE R', 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    color: #212121;
}
h2.right a {
    margin-left:10px;
    margin-right:10px;
}
h1 {
    line-height:1;
    text-align:center;
    font-size: 200%;
    pointer-events:none;
    padding:0;
    margin:0;
    position:fixed;
    text-transform:uppercase;
}
/* .sidenav {
    width:100%;
    background:#eee;
    height:50px;
} */
h2 {
    font-size:100%;
    padding:0;
    margin:0;
    position:fixed;
}
.left {
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -ms-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -moz-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    -o-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
    top: 50%;
    left: 30px;
}
.imprint {
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -ms-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -moz-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    -o-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
    bottom: 30px;
    left: 30px;
    
}
.center {
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -ms-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transform: translate(-50%, -50%) rotate(-90deg);
    -moz-transform: translate(-50%, -50%) rotate(-90deg);
    -ms-transform: translate(-50%, -50%) rotate(-90deg);
    -o-transform: translate(-50%, -50%) rotate(-90deg);
    transform: translate(-50%, -50%) rotate(-90deg);
    top: 50%;
    left: 50%;
}
.right {
   ...