談談關於CSS中transform屬性之scale

談談關於scale屬性

scale是什么？

根據W3C定義 ,scale主要是進行縮放和轉化:

scale能做什么？

1.1px細線

  <div class="wrap">
      <div class="UI-scale1"></div>
      <div class="UI-scale2"></div>
      <div class="UI-scale3"></div>
    </div>

CSS代碼

.wrap{
        position: relative;
}
.UI_scale1{
    position: relative;
    width: 200px;
    height: 50px;
    border-bottom:1px solid #000;
}
.UI_scale2{
    position:relative;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 50px;
    border-bottom: 1px solid #000;
}
@media screen and (-webkit-min-device-pixel-ratio:2){
    .UI_scale2{
        transform: scale(1,0.5);
        transform-origin:left center;
    }
}

2.頁面適配

  function scale(){
          var origin_H = 667,
              origin_W = 375,
              win_H = $(window).height(),
              win_W = $(window).width();
          var ratio1 =  win_H / origin_H ,
              ratio2 =  win_W / origin_W ;
          if(ratio1<ratio2){
              $('.page1-wrap').css({
                '-webkit-transform':'scale('+ratio1+')'
              })
          }
          else{
              $('.page1-wrap').css({
                '-webkit-transform':'scale('+ratio2+')'
              })
          }
    }
    

3.動畫(參考animate.css)

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }

    100% {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1)
    }
}

scale的屬性會影響那些屬性和布局

HTML代碼

  <div class="wrap">
      <div class="UI-scale1"></div>
      <div class="UI-scale2"></div>
      <div class="UI-scale3"></div>
    </div>

CSS代碼

.wrap{
        position: relative;
        background-color: #ccc;
}
.UI_scale1{
    position: relative;
    top: 0px;
    width: 100px;
    height: 50px;
    font-size:14px;
    line-height: 24px;
    margin-left: 50px;
    padding: 50px;
    border-bottom:1px solid #000;
    background-color: red;
}
.UI_scale2{
    position: relative;
    top: 0px;
    width: 100px;
    height: 50px;
    font-size:14px;
    line-height: 24px;
    margin-left: 50px;
    padding: 50px;
    border-bottom:1px solid #000;
    transform: scale(0.5);
    background: blue;
    transform-origin: center center;
}

如圖所示可以直接影響到所有帶px的屬性，但是由於scale屬性不會引起重排，會導致父元素的高度和寬度都不會受到影響.

scale和zoom差異

1.zoom引起重排，scale不會引起；縮放的中心點，zoom不能更改，而scale可以更改

2.重排導致的性能

1.scale會只會引起了當前元素

2.zoom會引起重排，所以會影響全部元素