web-dev-qa-db-fra.com

Comportement de débordement après l'utilisation de la transformation CSS3

S'il vous plaît vérifier le démo

J'ai deux divs, la première div est utilisée pour afficher la barre de défilement et la seconde div est utilisée pour la rotation du contenu intérieur de la div.

Ma question est la suivante: pourquoi la barre de défilement est-elle affichée même s'il n'y a pas de dépassement du contenu interne?.

S'il vous plaît vérifier la démo et dites-moi ce que je fais mal ici et comment surmonter ce problème ou tout autre moyen d'y parvenir.

HTML

<div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">
    <div id="RotationDiv">
        <img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" />
    </div>
</div>

CSS

#RotationDiv {
    -ms-transform-Origin: 539px 539px;
    -webkit-transform-Origin: 539px 539px;
    width: 434px;
    height: 1096px;
    overflow: visible;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    background-color:Red;
}
htmlcss3css-transformscss
16
Siddiqui

Vous utilisez transform afin que le modèle de formatage visuel d'un élément soit modifié.

De MDN :

La propriété de transformation CSS vous permet de modifier l’espace de coordonnées du fichier Modèle de formatage visuel CSS. En l’utilisant, les éléments peuvent être traduits, pivoté, mis à l'échelle et incliné en fonction des valeurs définies.

Encore une ligne de MDN :

En modifiant l’espace de coordonnées, les transformations CSS modifient la position et la forme du contenu affecté sans perturber la normale flux de documents. Ce guide fournit une introduction à l’utilisation de se transforme.

De W3C : 2 interactions de module

Ce module définit un ensemble de propriétés CSS qui affectent le visuel rendu des éléments auxquels ces propriétés sont appliquées; celles-ci les effets sont appliqués après que les éléments ont été dimensionnés et positionnés selon le modèle de formatage visuel de [CSS21]. Certains les valeurs de ces propriétés entraînent la création d'un contenant un bloc .__ et/ou la création d'un contexte de superposition .

Donc, vous avez un élément parent avec les dimensions ci-dessous.

width: 1096px; 
height: 434px;

Maintenant, vous transformez cet élément en utilisant

-webkit-transform: rotate(90deg);

Donc ici, l'élément se transforme visuellement, mais pas littéralement. En d'autres termes, même si vous transformez un élément, il prend physiquement l'espace sur un document, tout comme un élément statique, il transforme simplement l'élément. Je partagerai un schéma qui vous permettra de mieux comprendre.

enter image description here

Donc, bien que vous ayez transformé votre élément de cette manière, l’espace vertical a néanmoins été occupé à cause de la height de votre élément transformé, qui s’est transformé visuellement, mais pas littéralement ...

enter image description here

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

Demo

#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 en train de transformer un élément ayant class de .transformed, donc si vous voyez, l’élément le fait transform et modifie également l’origine, mais la boîte suivante ne bouge pas, car l’élément transformé occupe un espace littéral dans le flux. ne sort pas du flux comme le fait position: absolute;, mais bon, c'est le concept séparé. 

enter image description here

Vous devez donc utiliser position: absolute; ou votre div occupera toujours de la place verticalement et vous verrez donc cette barre de défilement ...

Solution compatible Poopy IE

Comme vous l'avez fait remarquer, eh bien, IE affichera toujours la barre de défilement car l'élément qui est positionné absolute existe toujours dans les mêmes dimensions, alors quelle est la séance d'entraînement ici?

  • Premièrement, vous transformez l'élément dans le conteneur parent, vous n'avez pas besoin de la variable overflow. La première question est donc de savoir si vous n'avez pas besoin de overflow alors pourquoi utiliser auto? Vous pouvez utiliser hidden.

  • Si hidden ne correspond pas au parent et que vous êtes impatient de placer du contenu sous l'élément transformé, mieux vaut envelopper l'élément transformé dans un autre élément de même dimension défini sur overflow: hidden; et vous assurer de déplacer la propriété position: absolute; vers ce bloc. - Demo

  • Si toujours pas heureux? Alors pourquoi transform élément entier? transform image pertinente uniquement - Demo

43
Mr. Alien

En effet, il utilise toujours les propriétés verticales (comme l’a dit hmore009 dans les commentaires).

Si nous jetons un coup d'oeil ici, vous pouvez voir ce que ça fait, alors vous savez que c'est vrai.

Exemple 1:

Donc, votre hauteur et la largeur du conteneur sont les suivantes:

width: 1096px;
height: 434px;

Maintenant que vous avez bien agi et les échanger contre la transformation #RotationDiv:

width: 434px;
height: 1096px;

Cela fonctionne bien si nous modifions le conteneur en overflow: hidden;. Cela signifie que nous ne pouvons pas voir de hauteur supplémentaire.

DEMO ICI

Exemple 2:

Mais je suppose que pour une raison quelconque vous ne voulez pas faire cela, probablement parce que vous ne savez pas pourquoi le débordement est causé. Voyons donc de plus près ce qui se passe. 

Si nous supprimons la hauteur de #RotationDiv, le débordement n’est plus là. C'est un peu câblé n'est-ce pas? Eh bien non, la hauteur était utilisée à la fois pour la transformation et la hauteur verticale.

DEMO ICI

Alors, comment pouvons-nous savoir que c'était la hauteur à l'origine de cela?

Maintenant, si nous donnons à #RotationDiv la même hauteur que le conteneur, nous pouvons constater qu’il n’ya pas de dépassement de capacité. 

DEMO ICI

Maintenant, si nous ajoutons 1px à cette hauteur, nous obtenons le dépassement de capacité. Hmm, la hauteur doit donc en être la cause. Même si nous transformons, la hauteur semble toujours être utilisée pour la hauteur verticale du conteneur.

DEMO ICI

Comment pouvons-nous régler ceci?

Nous avons déjà vu une option: donner le conteneur overflow: hidden; ou simplement le supprimer. Cela arrêtera le défilement dans le conteneur.

DEMO ICI

Ou vous pouvez simplement obtenir un éditeur d’image (il y en a qui sont en ligne gratuits) et retourner l’image comme ça. Cela épargnerait beaucoup de difficulté à le faire de cette façon.

Sinon, vous pouvez retourner l'image uniquement supprimer #RotationDiv et donner le conteneur background: red;

DEMO ICI

Comment je le ferais encore en utilisant transform:

Je voudrais enlever le overflow: auto;, supprimer le div inutile et définir la transformation sur le img. 

C'est à vous de décider comment vous voulez le faire, il y a plusieurs façons. La meilleure façon, à mon avis, de ne pas utiliser de transformation, mais simplement d’inverser l’image à l’aide d’un éditeur d’image (Photoshop, par exemple).

DEMO ICI

5
Ruddy

eh bien, j'avais du mal à causer trop de débordement

mon problème était que la mise à l'échelle horizontale entraînait un débordement horizontal, donc ce que j'ai fait était de changer simplement la mise à l'échelle horizontale en mise à l'échelle verticale et cela a résolu le problème (ou contourné le problème)

d'après ce que j'ai compris de ce bogue, comme il n'a pas de solution commune, il suffit de le contourner. 

0
FelixWang