Débordement de comportement après l'utilisation de CSS3 transformer

Vous utilisez transformer donc il change de modèle de formatage visuel d'un élément.

De MDN:

Le CSS propriété transform permet de modifier l'espace de coordonnées de l'
CSS modèle de formatage visuel. En l'utilisant, les éléments peuvent être traduits,
rotation, échelle, et biaisé selon les valeurs définies.

Une ligne à nouveau à partir de MDN:

Par la modification de l'espace de coordonnées, CSS transforme changer la position
et la forme du contenu en question, sans perturber le fonctionnement normal
flux de documents. Ce guide fournit une introduction à l'utilisation de
transforme.

---

De W3C : 2 Module Interactions

Ce module définit un ensemble de propriétés CSS qui influent sur le visuel
le rendu d'éléments dont les propriétés sont appliquées; ces
les effets sont appliqués après que les éléments ont été dimensionné et positionné
selon le Modèle de formatage visuel de [CSS21]. Certains
les valeurs de ces propriétés pour conséquence la création d'un contenant
bloc, et/ou la création d'un l'empilement de contexte.

---

Si vous avez un parent de l'élément avec les dimensions ci-dessous.

width: 1096px; 
height: 434px;

Maintenant, vous sont en train de transformer cet élément à l'aide de

-webkit-transform: rotate(90deg);

Donc, ici, l'élément se transforme visuellement, mais pas littéralement, en d'autres termes si vous transformez un élément, il faut de l'espace physique sur un document comme un élément statique prend, c'est juste visuellement transforme l'élément. Je vais partager un schéma qui vous permettra de mieux comprendre..

Donc si vous avez transformé votre élément de ce genre, mais encore l'espace vertical a été prise en raison de la height de votre transformé élément, qui a transformé visuellement, mais pas littéralement...

---

Donc, maintenant, quelle est la solution? Utilisation position: absolute; sur l'élément enfant, et de toute façon vous utilisez position: relative; sur le parent.

Démo

#RotationDiv {
    -ms-transform-origin: 539px 539px;
    -webkit-transform-origin: 539px 539px;
    width: 434px;
    height: 1096px;
    position: absolute;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}

---

Permet d'avoir un cas de test, j'ai les styles comme ci-dessous

.parent .transformed {
    height: 200px;
    width: 200px;
    background: #f00;
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
    -moz-transform-origin: 300px 300px;
    -webkit-transform-origin: 300px 300px;
    transform-origin: 300px 300px;
}

.parent .static {
    background: #00f;
    height: 200px;
    width: 200px;
}

Cas de Test

Ici, je suis la transformation d'un élément ayant class de .transformed donc si vous le voyez, l'élément ne transform et je suis aussi la modification de l'origine, mais la prochaine box ne bouge pas, comme la transformée élément prendre littérale de l'espace dans le flux, il n'est pas sorti de l'écoulement comme position: absolute; fait, mais bien que la notion distincte.

Si vous avez besoin d'utiliser position: absolute; ou votre div va encore prendre de l'espace à la verticale et donc vous voyez que la barre de défilement ...

---

Poopy IE Solution Compatible

Comme vous avez dit, eh bien, oui, c'est à dire sera toujours afficher la barre de défilement que l'élément en position absolute existe toujours dans les mêmes dimensions, alors quelle est la séance d'entraînement ici?

• Tout d'abord, vous sont en train de transformer l'élément à définir dans le conteneur parent, aussi, vous n'avez pas besoin de la overflow donc, la première question est de savoir si vous n'avez pas besoin overflow que pourquoi utiliser auto? Vous pouvez utiliser hidden.

• Si pas hidden pour le parent, et vous êtes à la recherche de l'avant pour placer le contenu sous la transformée élément, de mieux vous envelopper la transformée élément à l'intérieur d'un autre élément avec les mêmes dimensions de overflow: hidden; et assurez-vous de déplacer le position: absolute; propriété de ce bloc. - Démo

• Si toujours pas heureux? Alors pourquoi transform ensemble de l'élément? transform image pertinente seulement - Démo

OriginalL'auteur Mr. Alien

bien j'ai eu du mal provoquant le débordement trop

mon problème est que l'échelle horizontale faite horizontale débordement, donc je l'ai juste changer l'échelle horizontale à la verticale de mise à l'échelle et il a résolu le problème (ou contourné le problème tbh)

ma compréhension de ce bug, c'est que depuis il n'a pas de solution commune, donc rendez-vous autour de lui.

OriginalL'auteur FelixWang