Text Rotation (centrer pour le menu)

Bonjour,

Le principe semble simple pourtant lol

Une image du résultat attendu :

Je travaille sur mon menu et je n'arrive pas à faire en sorte que mes li prennent une rotation de -90deg centrer en bien espacer (idéalement, milieu du ul) et que ce soit désactiver en responsive.
Voici ce que j'ai tenté :
-Mettre des class sur les li et leur appliquer une transform:rotation(-90deg) mais les li s'emboîtent !
-Mettre des margins top et bottom pour espacer
-Mettre des transform :rotation(0deg) dans les mediasQueries (pour le responsive)
-J'ai également essayé de faire une rotation sur le ul ou nav, mais ça fout tout en l'air !

Mon code sur Codepen
http://codepen.io/Loic_ROGER/pen/KRayLb
Modifié par LOIC_75 (29 Apr 2018 - 15:23)

Bonjour LOIC_75,
Normalement si tu utilises writing-mode et transform avec un rotateZ cela devrait fonctionner :

.sidenav li{
writing-mode : vertical-lr;
transform : rotateZ(180deg); 
}

Bonsoir aliasdmc
Merci de ton retour,

ça fonctionne plûtot bien en revanche je m'emmêle les pinceaux concernant le responsive, j'ai fais l'inverse histoire que ça se mettent en "inline" aux niveau des MediaQueries mais ça ne fonctionne pas et sur IE11 mdr c'est carrément à l'envers lol

Bonjour,
Essaye de mettre les version prefixées en adaptant :
writing-mode

-ms-writing-mode : tb-rl ; /* ancien IE */
-ms-writing-mode : vertical-rl;
writing-mode : vertical-rl;

transform

-webkit-transform : rotate(30deg);
-moz-transform : rotate(30deg);
-ms-transform : rotate(30deg);
-o-transform : rotate(30deg);
transform : rotate(30deg);