CSSにおけるzoom属性とscale属性の使い方と違い

この記事では主にCSSのzoom属性とscale属性の使い方と違いを紹介します。CSSの入門学習のための基礎知識です。

zoom属性
構文:
zoom: Normal | d80b5def5ed1be6e26d91c2709f14170 | 42c97a047d75abc12b9b351eb8562711
デフォルト値:normal
適用対象:すべての要素
値:
normal:
オブジェクトの実際のサイズを使用します。
5493f042755bb15b81b474fffbf5761a:
浮動小数点数を使用してスケーリング率を定義します。負の値は許可されません
42c97a047d75abc12b9b351eb8562711:
パーセンテージを使用してスケーリングを定義します。負の値は許可されません
説明:
オブジェクトのスケーリングを設定または取得します。
対応するスクリプト機能はズームです。

スケール属性
スケール属性の値は 2 です。scale();
scale(x, y );
1.scale(x,y) は要素をスケールします
X は水平方向のスケール係数を表します Y は垂直方向のスケール係数を表します
Y はオプションのパラメータです。設定されていない場合は、両方を意味します。 X 方向と Y 方向のズーム率は同じです。そしてXの対象となります。
transform:scale(2,2.5);
2.scaleX() 要素は、X 軸 (水平方向) の要素のみをスケールします。
デフォルト値は 1 で、基点は依然として要素の中心にあります。基点は、transform-origin
transform:scaleX(2);
3 を通じて変更できます。scaleY() 要素は、Y 軸 (垂直方向) の要素のみをスケールします。
基点も要素の中心にあります。基点は、transform-origin を通じて変更できます。
transform:scaleY(2);
互換性の記述を見てください:

 .test{   
-moz-transform:scale(2,2);   
-webkit-transform:scale(2,2);   
-o-transform:scale(2,2);   
background:url(img/i.png) no-repeat;   
width:198px;   
height:133px;   
}

zoomとscaleの違い

zoomとscaleはどちらも要素をズームするために使用されますが、互換性とは別に、外側にいくつかの異なる場所があります。ズームでは要素が左上隅に維持されますが、スケールのデフォルトは中央の位置であり、transform-origin によって設定できます。さらに、実行されるレンダリング順序も異なり、ズームはボックスの計算に影響を与える可能性があります。

8b05045a5be5764f313ed5b9168a17e6 を実行します

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSSのクラスとIDの違いと使用法の分析について

以上がCSSにおけるzoom属性とscale属性の使い方と違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。