CSS3 transformer pivoter le texte, position fixe à gauche et à droite, centrée verticalement
Je suis en train de position d'un élément vers la gauche et une à droite de la fenêtre du navigateur, les deux contient un ul
avec CSS transformer tourner. J'ai réussi à positionner .rotate-left
et ses ul
à gauche, mais j'ai été incapable de position de la ul
à l'intérieur de .rotate-right
vers la droite. (Il doit être visible sur une ligne horizontale de droite à gauche si la transformation n'est pas pris en charge.)
CSS:
.rotate-left ul li,
.rotate-right ul li {
display: inline;
}
.rotate-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-left ul {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
}
.rotate-right {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-right ul {
position: fixed;
top: 0;
bottom: 0;
right: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(90deg) translate(-50%, 50%);
-moz-transform: rotate(90deg) translate(-50%, 50%);
}
HTML:
<div class="rotate-left">
<ul>
<li>left</li>
<li>left</li>
<li>left</li>
</ul>
</div>
<div class="rotate-right">
<ul>
<li>right</li>
<li>right</li>
<li>right</li>
</ul>
</div>
-
Démo: http://codepen.io/anon/pen/FtyEG
J'ai construit sur cette 100% de la hauteur du bloc de texte vertical.
OriginalL'auteur michael | 2013-03-09
Vous devez vous connecter pour publier un commentaire.
Je l'ai résolu, et nettoyé le code un peu.
Démo: http://codepen.io/anon/pen/LHeaB
OriginalL'auteur michael
Je pense que j'en suis plus ou moins droit. Il serait:
Vous n'avez pas besoin de traduire si vous choisissez ok le transformer origine; aller à 78% pour compenser la li largeur
padding: 0;
surul
, désolé. J'ai mis à jour la démo. Votre solution est encore de fermer tho. Sur 30px de la verticale.OriginalL'auteur vals