Éléments pivotés en CSS qui affectent correctement la hauteur de leurs parents

Question

Disons que j'ai un couple de colonnes, dont certains que j'aimerais faire tourner les valeurs de:

http://jsfiddle.net/MTyFP/1/

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

Avec ce CSS:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

Il finit par ressembler à ceci:

Est-il possible d'écrire du CSS qui va provoquer la rotation de l'élément d'affecter l'un de ses parents hauteur, tels que le texte ne se chevauchent pas les autres éléments? Quelque chose comme ceci:

Answer 1

Malheureusement (?) c'est comme cela suppose de travailler, même si vous faites pivoter votre élément il a encore une certaine largeur et la hauteur, qui ne change pas après la rotation – vous visuellement le changer, mais il n'est pas invisible emballage boîte qui change de taille lorsque vous faites tourner les choses. Imaginez une rotation de moins de 90° (par exemple, transform: rotate(45deg)) – vous devez introduire une telle invisible boîte qui a maintenant ambigu dimensions basées sur les dimensions d'origine de l'objet en rotation et la réelle valeur de rotation.

Soudain, vous n'avez pas seulement l' width et height de l'objet à faire pivoter, mais également width et height de "l'invisible" de la boîte autour d'elle. Imaginez demandant à l'extérieur de la largeur de cet objet - qu'en serait-il de retour? La largeur de l'objet, ou l'une de nos box? Comment pourrions-nous distinguer entre les deux?

Par conséquent, il n'y a pas de CSS que vous pouvez écrire pour corriger ce comportement (ou devrais-je dire, "automatiser" c'). Bien sûr, vous pouvez augmenter la taille de votre conteneur parent à la main, ou écrire du JavaScript pour gérer cela.

(Juste pour être clair, vous pouvez essayer d'utiliser element.getBoundingClientRect pour obtenir le rectangle précisé ci-avant).

Comme décrit dans la spécification:

Dans le code HTML de l'espace de noms, la transformation de la propriété n'affecte pas le flux du contenu environnant les transformées de l'élément.

Ce qui signifie qu'aucune modification ne sera apportée au contenu autour de l'objet que vous êtes à la transformation, à moins que vous les faites à la main.

La seule chose qui est pris en compte lorsque vous transformez votre objet est le débordement de la zone:

(...) l'ampleur du débordement de la zone prend en compte transformé éléments. Ce comportement est similaire à ce qui se passe lorsque des éléments sont compensés par le positionnement relatif.

Voir ce jsfiddle pour en savoir plus.

C'est vraiment très bon pour comparer cette situation à un objet offseted à l'aide de: position: relative - les environs de contenu ne change pas, même si vous êtes à déplacer votre objet (exemple).

Si vous souhaitez gérer cela à l'aide de JavaScript, jetez un oeil à cette question.

Answer 2

Utilisez des pourcentages pour padding et un pseudoélément pour pousser le contenu. Dans le violon, j'ai laissé le pseudoélément en rouge pour le montrer et vous devrez compenser le décalage du texte, mais je pense que c'est la voie à suivre.

http://jsfiddle.net/MTyFP/7/

Une description de cette solution peut être trouvée ici: http://kizu.ru/en/fun/rotated-text/

Answer 3

Je sais que c'est un ancien post mais je l'ai trouvé tout en luttant avec exactement le même problème. La solution qui fonctionne pour moi est une méthode "rudimentaire" plutôt rudimentaire, en entourant simplement le div que je tourne de 90 degrés avec beaucoup de

 <br>
 

Connaissant la largeur approximative (qui devient hauteur après rotation) de div, je peux compenser la différence en ajoutant des br autour de cette div pour que le contenu situé au-dessus et au-dessous soit poussé en conséquence.