zoomとscaleの異同点

1.互換性の問題

zoomはcssの標準属性ではなく、FirefoxとOpera Miniはサポートされていません.他の標準のブラウザはよくサポートされています.ieはie 6以降からこの属性をサポートしている.この属性は、Firefoxの互換性の問題を考慮するなど、リスクがあります.
tranform:scale(x)はcssの標準属性であり,Opera Miniを除いてほとんどの標準ブラウザでサポートされている.ieブラウザはie 11以降にサポートを開始するが、ie 9およびie 9以降のブラウザはプレフィックス付き属性-ms-transformをサポートする.もしあなたのホームページがie 8と以前のieブラウザを互換化するならば、互換性の処理をする必要がありますが、実はもっと良い方法は退職でしょう.今はどんな時代ですか.どうしてこんな古いブラウザを互換化することができますか.もちろん、私は冗談を言っています.結局、あなたは貧乏で、どうして簡単に退職することができますか.

2.値の問題

zoomの値はnormal、0以上の浮動小数点数、または0以上のパーセントであってもよい.その中でnormalは要素の実際のサイズで、縮まないで放さないで、静かに1つの場所のようです.zoomの値が0の場合、zoomも縮まず放さず、zoomが1の場合と同じです
transform:scale(x)の値は数値のみで、パーセンテージまたはその他ではありませんが、値は正数でも負数でも0でも構いません.このうちxが0の場合,元素はそのまま消えてしまう.xが負数の場合、要素は時計回りに180度回転しますし、反時計回りかもしれませんが、どうせ上下逆さまになっているのか分かりません.私は2 d平面を指しています.3 dの平面は研究していません.
またscaleは、scaleX()、scaleY()、scaleZ()を用いてx、y、zを単独で増幅することができる同軸ではない.zoomは等比増幅しかできません.

3.表示効果

3.1拡大・縮小点

zoomは左上に原点がありスケーリングされており、デフォルトではこの点は変更できません.中心の拡大縮小の効果を実現するには、jsを使って要素の位置を動的に変更する必要があります.あるいは、牛が騒いでいる人であれば、ieのマトリクス変換を使用することを考えることができます.私の大学入試の数学は130ではありませんが、ieのマトリクス変換がいったいどういうことなのか分かりません.
transfrom:scale(x)の変化はデフォルトでは中心点に準じて変化し、この変化の点はtransform-originによって変化することができる.

3.2位置

zoomスケール後の要素は実際の位置を占めています.例えばzoomの要素の後ろにotherというdivがついています.要素が拡大され、otherという名前のdivも押された.
一方、scaleでスケールされた要素は実際の位置を占めず、scaleで拡大された要素は大きく見えますが、実際に占有された位置は以前ほど小さくありません.したがって、他の要素はそのために位置を変えることはありません.
もう1つ注意すべきことは、scaleが増幅された要素は実際の位置を占めないが、イベントに応答することができることである.
要素がzoomで拡大縮小してもscaleで拡大縮小しても、要素にクリックイベントをバインドすると、クリック要素はイベントに応答します.

4.パフォーマンス

zoomは実際に物体のサイズを変更し、この変更は他の要素に影響を与えるため、zoomを使用するとブラウザの再レンダリングを引き起こし、パフォーマンスが低下します.scaleはターゲット要素のみを単独で変更し、他の要素に影響を与えないため、パフォーマンスが向上します.

 5.クリックしてページ効果を表示

クリックして効果を確認

html>
    
    
    
    

        

            
zoom
        
        

            

                div1            
            

                div2            
            

                div3                
            
            
        
        
        
scale
        

            
            

                div5            
            

                div6            
            

                div7                
            
            
        
        
zoom&other
        

            

                zoom：1            
            

                
            
            

                zoom：2            
            

                other            
        
        
scale&other
        

            

                scale(1)            
            

                other            
            

                scale(2)            
            

                other            
        
        
    
    
        var zoomO2 = document.querySelector(".zoomO2");
        zoomO2.onclick=function(){
            console.log("zoomO2");
        }        var scaleO2 = document.querySelector(".scaleO2");
        scaleO2.onclick=function(){
            console.log("scaleO2");
        }