web-dev-qa-db-ja.com

ズーム対CSS3でスケーリングする

私は一度も使用したことがなく、css3のzoomプロパティについて知ったcssプロパティを探していました。

  • それらの類似点と相違点は何ですか？

  • ズームを使用するタイミングと拡大縮小のタイミングどちらもほぼ同じ仕事をします。

  • どちらを使用するのがより効率的で、なぜですか？

何に気付きましたか？

  • どちらもオブジェクトを拡大縮小しますが、デフォルトの変換元は中心を拡大縮小し、ズームは左上にあると思います

  • ホバーでのスケーリングにそれらを使用すると、ズームはスケーリングされ、元の寸法に再び縮小しますが、スケールはホバーアウトでのみ縮小します。 ->>ホバー効果を示すjsfiddlet **

*
{
    -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>

いくつかのStackoverflow QA

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

変換は、ブラウザー間でズームするよりも予測可能です。

ズームは、ポジショニングに影響を与えますブラウザによって異なります。

例：position:absolute; left:50px; zoom: 50%;

  • IEはleft値をまったく変更しません。
  • Chromeは左の値を25pxに変更します。事実上、left = left * zoomを実行します。しかし、DevToolsのDevTools計算値は、ズームのために事実上そうではありませんが、left: 50pxを表示し続けます。

変換は、すべてのブラウザで同じように処理されます（私が知る限り）。

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

  • leftは、ChromeとIEの両方で25pxに効果的に設定されます。 （再び、計算された値はまだこれを反映せず、left:50pxを表示します）
  • left値の変更を避けるには、単にtransform-Origin: 0 0を使用します。これにより、残りが50ピクセルのままになります。

デモ： http://jsfiddle.net/4z728fmk/ は2つのボックスを表示します。小さなボックスは50％に拡大または縮小されます。次のようになります。

comparison of zoom and transform in different browsers

編集：img Firefoxで2016年6月16日に更新（前回からChromeまたはIEに変更はありませんでした）

73
Drkawashima

Drkawashimaの答えを補完するもの：

  • zoomは、Firefoxではまったく機能しません。 caniuse を参照してください
  • 昔々（おとぎ話はここで終わりました）、zoom: 1;はIE6のデバッグに役立つ強力な宣言でした。 hasLayoutという名前のこのブラウザーに内部「スイッチ」が適用された要素を付与しました（CSSプロパティではなく、「clearfix」のような概念です）。古いプロジェクトにはposition: relative; zoom: 1;がかなりあります
10
FelipeAls

zoomはcssアニメーションまたはtransitionプロパティでは動作しません： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

1
Ustym Ukhman