web-dev-qa-db-fra.com

CSS Transform scale, ne redimensionne pas l'élément enfant

Si j'ai une div avec quelques éléments enfants et que la transformation css est mise à l'échelle. J'ai un élément enfant que je ne veux pas mettre à l'échelle

#parent{
    -webkit-transform: scale(.5);
}
 
span:last-child{
    -webkit-transform: Something to ignore the parent scale;
}
<div id="parent">
    <span>Child 1</span>
    <span>Child 2</span>
    <span>Child 3 (Don't Scale Me)</span>
</div>

Cela peut-il être fait avec css seulement? Sans changer le code HTML ni utiliser js.

csscss3transform
14
Matt Coady

Malheureusement, ce n'est pas possible.

Vous avez à peu près deux autres options:

  1. Mettez à l'échelle tous les autres éléments, à l'exception de celui que vous ne souhaitez pas mettre à l'échelle (mais cela ne modifiera pas le conteneur).
  2. Redimensionnez le conteneur et redimensionnez l'élément que vous ne souhaitez pas redimensionner (mais cela le rendra probablement flou).

Exemples:

// Example 1.
span:not(:last-child) {
    display: inline-block; /* You can't scale inline elements */
    transform: scale(2);
}

// Example 2.
#parent{
    transform: scale(.5);
}

span:last-child{
    transform: scale(2);
}
8
Reinier Kaper

J'ai bien peur que vous deviez utiliser un sélecteur plus détaillé, comme celui-ci #parent > span:not(:last-child). Exemple .

2
sgromskiy

Toutes les solutions de navigateur pour une sortie propre (pas floue), mais avec une petite modification du code HTML

Une autre solution possible avec une sortie plus propre, mais avec une petite modification du code html, consiste à placer l'élément en dehors de l'élément parent, ce qui doit être mis à l'échelle.

Après cela, définissez child div sur parent. Maintenant, définissez la valeur supérieure sur 0 moins la hauteur du parent et à gauche sur 0.

De cette façon, les éléments enfants ne seront pas affectés et ne seront pas flous. 

Pour moi, cette solution a toujours bien fonctionné.

Jetez un oeil à cette question similaire, mais avec un exemple beaucoup plus simple, à cause du moins de code: Mettre à l'échelle l'élément parent mais supprimer la mise à l'échelle des éléments enfants

#parent {
  height: 200px; width: 300px;
  background: beige;
  transition: transform 0.3s linear;
  transform-Origin: top left;
}

#child {
  /* top value 0 is minus the height of parent*/
  top: -200px; left: 0px;
  position: relative;
  pointer-events: none;
}

.scale {
  transition: transform 0.3s linear;
  transform-Origin: top left;
}

#parent:hover {
  transform: scale(2.0);
  transition: transform 0.3s linear;
}

/* affect child elements by hover, too */
#parent:hover + #child > .scale {
  transform: scale(2.0);
  transition: transform 0.3s linear;
}

/* set span to block for transforming */
span {
  display: block;
  padding-bottom: 10px;
}
<div id="parent">
</div>

<div id="child">
  <span class="scale">Child 1</span>
  <span class="scale">Child 2</span>
  <span>Child 3 (Don't Scale Me)</span>
</div>

Notes d'extrait de code

/ * set span to block pour transformer * /

Comment utiliser la transformation CSS3 sur une étendue?

/ * affecte aussi les éléments enfants en survol * /

Comment affecter d'autres éléments lorsqu'un survol est survolé ou mieux Que signifie le sélecteur CSS “+” (signe plus)?

Conclusion

Je pense qu'il n'y a pas d'autre solution pour obtenir une sortie propre, car l'échelle affectera toujours les sous-éléments, mais vous pouvez effectuer cette solution de contournement. 

Cela devrait fonctionner avec une position fixe des divs, aussi.

De toute façon, vous devez changer le code html pour obtenir une sortie propre.

2
Daniel Patrick

J'ai trouvé hack pour que Chrome résolve le problème de flou.

#parent { transform: scale(5);}
#child  { transform: scale(0.2)  translate3d( 0, 0, 0);}
0
Aikon Mogwai