Question Rotation div 90 degrés et position fixe dans le coin supérieur gauche


C'est ce que j'essaie d'accomplir:

preview

Je veux avoir une navigation qui sera pivotée de 90 degrés et fixée au coin supérieur gauche de la fenêtre.

HTML:

<div class="outer">
    <div class="inner">
        <ul class="list">
            <li class="item">lasange</li>
            <li class="item">spaghetti</li>
        </ul>
    </div>
</div>

CSS:

.outer {
    position: fixed;
    left: 20px;
    top: 20px;
    background: red;
}

.inner {
    -webkit-transform: rotate(-90deg);
    transform-origin: 0 0;
    background: green;
}

Je ne peux pas le faire ressembler à l'image ci-dessus. Le problème est avec la rotation. Le div interne est positionné puis tourné et, en conséquence, se retrouve en dehors de la div externe. Peu importe l'origine de la transformation, cela ne fonctionne pas comme je le souhaite. J'ai essayé de positionner la div interne avec position: absolute mais sans chance. Je ne connais pas les paramètres hauteur / largeur de la liste de menus.

Voici un violon: https://jsfiddle.net/949cjcnq/7/

Toute aide serait grandement appréciée.

Meilleures salutations, Paul


10
2017-11-02 23:26


origine


Réponses:


Je parviens donc à le positionner comme vous le souhaitez, quelle que soit la taille de votre contenu position: absolute; pour votre .interne-div.

Le seul inconvénient est que votre texte est tourné vers le bas et ne pas vers le haut. Impossible de contourner ce problème avec mon CSS: S

Si vous -webkit-transform: rotate(180deg); l'enfant de .inner vous pouvez tourner le texte dans le bon sens :)

.outer {
  position: fixed;
  left: 20px;
  top: 20px;
  background: red;
}

.inner {
  position: absolute;
  bottom: 100%;
  -webkit-transform: rotateZ(90deg);
  transform-origin: 0 100%;
  background: #AACAD7;
  white-space: nowrap;;
}
.rotate {
  -webkit-transform: rotate(180deg);
}
ul { list-style: none; padding: 0; margin: 0; white-space: nowrap; }
ul li { padding: 5px 10px; }
<div class="outer">
  <div class="inner">
    <ul class="list rotate">
      <li class="item">lasange | spaghetti</li>
    </ul>
  </div>
</div>


5
2017-11-03 00:12



Je pense que ce que vous voulez faire, c'est déplacer la rotation de la classe interne vers la classe externe. Votre css devrait ressembler à ceci:

.outer {
    -webkit-transform: rotate(-90deg);
    position: fixed;
    left: 20px;
    top: 80px;
    background: red;
}

.inner {
    background: green;
}

Pour que le texte apparaisse côte à côte après la rotation, l'utilisation d'un tableau fonctionnerait mieux que d'utiliser une liste:

<div class="outer">
    <div class="inner">
        <table class="list">
            <tr>
                <td class="item">lasange</td>
                <td class="item"> | </td>
                <td class="item">spaghetti</td>
            <tr>
        </table>
    </div>
</div>

Violon de travail: https://jsfiddle.net/949cjcnq/12/


1
2017-11-02 23:40



En dépit de ce que vous avez choisi pour l'angle ou la rotation, vous ne pouvez malheureusement pas le faire sans connaître la largeur de votre élément. Je ne pense donc pas que cela puisse être fait en CSS / CSS3 sans structure étendue. Pour résoudre ce problème, vous devrez utiliser du JavaScript et obtenir la largeur calculée de l'élément et modifier la transformation de manière appropriée:

var inner = document.querySelectorAll('.inner')[0];
var width = inner.offsetWidth;
inner.style.transform = "translateY("+width+"px) rotate(-90deg)";

Garder transform-origin: 0 0 comme il aura le haut de l'élément au bord de l'écran. Ensuite, il suffit de traduire dans la direction Y par la largeur, cela placera l'élément dans le coin gauche:

Exemple de violon


0
2017-11-03 00:08



Dans l'extrait ci-dessous, vous verrez que j'ai retiré le outer et inner html et juste fait pivoter l'ensemble UL -90deg. Le résultat est votre exemple d'image. Plus de style est à vous de choisir ;-)

Voir l'extrait de code pour les commentaires:

/* {outline: 1px dotted red } /* for debugging */

ul, li { list-style-type: none; padding: 0; margin: 0 }

ul { height: 1; /* 1 x line-height */
    position: relative;
    float: left;
    padding: 0 6px;

    /* would be regular without transform */
    top: 20px; left: 20px;

    /* but transform-origin now pivots around
    top-right so UL element gets moved right.
    So left position needs correction:
    left = -1 x (total width of LI's + line-height + UL margin-LR + UL padding-LR) + wanted-left-margin */
    top: 20px; left: -134px; /* (optically estimated) */  
}

li {
    display: inline; /* result is horizontal menu */
}

.list {
    transform: rotate(-90deg); /* removed -webkit-*/
    transform-origin: top right;
    background: #acc9d7;
}
<ul class="list">
    <li class="item">lasange | </li>
    <li class="item">spaghetti</li>
</ul>


0
2017-11-03 00:51



Vous pouvez ajouter un translateX (-100%) à votre transformation, ce qui la mettra à votre guise

.outer {
    position: fixed;
    left: 20px;
    top: 20px;
    background: red;
}

.inner {
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
    background: green;
}

.list {
  margin-top: 0px;
}
<div class="outer">
    <div class="inner">
        <ul class="list">
            <li class="item">lasange</li>
            <li class="item">spaghetti</li>
        </ul>
    </div>
</div>


0
2017-11-03 18:56