web-dev-qa-db-fra.com

Zoom vs. Echelle en CSS3

Je cherchais des propriétés css que je n'avais jamais utilisées et j'ai appris à connaître la propriété zoom de css3

  • Quelles sont les similitudes et les différences entre elles?

  • Quand utiliser le zoom et quand l'échelle? Les deux font à peu près le même travail.

  • Quel est le plus efficace à utiliser et pourquoi?

Qu'ai-je remarqué?

  • les deux redimensionnent l'objet mais transform-Origin par défaut pour redimensionner son centre et pour zoomer en haut à gauche je pense;

  • lorsque nous les utilisons pour la mise à l'échelle en survol, le zoom est redimensionné et réduit à nouveau à la dimension d'origine, tandis que l'échelle ne diminue que lors du survol. - >> jsfiddle montrant l'effet de survol **

*
{
    -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -ms-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
}

box, box2
{
    display: inline-block;
    width: 100px;
    height: 100px;
    
    margin: 20px;
}

box
{
    background: #b00;
}

box:hover
{
    zoom: 1.1;
}

box2
{
    background: #00b;
}

box2:hover
{
    -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
}
<box></box>
<box2></box2>

Certains QA Stackoverflow

div {
  display: inline-block;
  height: 50px;
  width: 50px;
}
.one {
  background: #07a;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
  transform-Origin: top top;
}
.two {
  background: #eee;
  zoom: 200%;
  margin-left:100px;
}

.three {
  background: #07a;
  transform-Origin: top left;
  transition:all 0.6s ease;
}

.three:hover{
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}

.four {
  background: #eee;
  transition:all 0.6s ease;
}

.four:hover{
  zoom: 200%;
}
<h4>Already zoomed and scalled</h4>
<div class="one"></div>
<div class="two"></div>
<hr>
<h4>Zoomed and Scalled on hover</h4>
<div class="three"></div>
<div class="four"></div>
cssdomzoomscale
49
eirenaios

La transformation est plus prévisible que le zoom sur les navigateurs.

Le zoom affecte le positionnement différemment selon les navigateurs.

exemple: position:absolute; left:50px; zoom: 50%;

  • Internet Explorer ne changera pas la valeur left.
  • Chrome modifiera la valeur de gauche en 25px. Effectivement, cela fait left = left * zoom. Mais les valeurs calculées par DevTools dans DevTools continueront d'afficher left: 50px, Même si cela n'est pas vrai en raison du zoom.

La transformation est gérée de la même manière dans tous les navigateurs (autant que je sache).

exemple: position:absolute; left:50px; transform: scale(0.5)

  • left serait effectivement réglé sur 25px dans les deux Chrome et IE. (encore une fois, les valeurs calculées ne refléteront toujours pas cela, elles afficheront left:50px)
  • Pour éviter de changer la valeur left, utilisez simplement transform-Origin: 0 0. Cela garantira que la gauche est toujours de 50 pixels.

Démo: http://jsfiddle.net/4z728fmk/ montre 2 cases où la petite est zoomée ou réduite à 50%. Ressemble à ça:

comparison of zoom and transform in different browsers

edit: img mis à jour le 16/06/2016 avec Firefox (rien n'a changé dans Chrome ou IE depuis la dernière fois)

73
Drkawashima

Complémentaire à la réponse de Drkawashima:

  • zoom ne fonctionne pas du tout dans Firefox. Voir caniuse
  • Il était une fois (le conte de fées se termine ici désolé), zoom: 1; était la déclaration puissante qui a aidé à déboguer IE6. Il a conféré à l'élément auquel il avait été appliqué un "commutateur" interne à ce navigateur nommé hasLayout (pas une propriété CSS, mais simplement un concept comme "clearfix"). Tu trouveras position: relative; zoom: 1; beaucoup dans les vieux projets
10
FelipeAls

zoom ne fonctionne pas avec les animations css ni transition propriety: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

1
Ustym Ukhman