谈谈关于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会引起重排，所以会影响全部元素