Problème Menu Sideways en position fixed

Bonjour,

J'ai un problème sur lequel vous allez peut-être pouvoir m'aider. Je tente de coder un menu constitué de quelques lien écrit à la verticale (de gauche à droite) et positionné à gauche de la page.

La div du menu est une flexbox (pour avoir les liens à équidistance les uns des autres avec justify-content :space-between) en position fixed avec une rotation de -90deg pour qu'elle soit retournée.

Mon problème ici est que pour régler sa distance par rapport au bord gauche de la page (que j'aime faire avec left : 15px ou 5%) par exemple ne marche pas car le code prend la rotation créée comme un carré et le "left" s'applique après cet espace invisible créée par la rotation.

Je sais pas si j'ai réussi à bien me faire comprendre mais en tout cela me pause problème pour tous responsives designs !

Merci pour votre aide !

<div class="nav">
        
                <a href="work_photos.html">photos</a>
                <a href="work_commercials.html">commercials</a>
                <a href="work_musicvideos.html">music&nbspvideos</a>
                <a href="work_features.html">features</a>
                <a href="work.html">all</a>

            </div>

.nav
{
	position: fixed;
	display: flex;
	justify-content: space-between;
	width: 650px;
	font-size: 13px;
	font-weight: bold;
	top: 50%;
	transform: rotate(-90deg);
	z-index: 2;
}

Essaie ceci :

{
    position: fixed;
    left: -25vh;
    top: 50vh;
    width: 50vh;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: bold;
    transform: rotate(-90deg);
    z-index: 2;
    background: #aaa;
    padding: 0.3rem 1rem;
}

Modifié par bazooka07 (11 Jul 2018 - 13:58)