談談關於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會引發重排，因此會影響所有元素