談談關于CSS中transform屬性之scale

zacklee 發布于2019-08-01 15:30 / 1206人閱讀

摘要：談談關于屬性是什么根據定義主要是進行縮放和轉化能做什么細線代碼頁面適配動畫參考的屬性會影響那些屬性和布局代碼代碼如圖所示可以直接影響到所有帶的屬性，但是由于屬性不

談談關于scale屬性 scale是什么？

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

scale能做什么？ 1.1px細線

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
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代碼
  
      
      
      
    
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會引起重排，所以會影響全部元素

云服務器 GPU云服務器 css屬性訪問CSS屬性 position屬性，css 獲取CSS屬性值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49945.html

談談關于CSS中transform屬性之scale

摘要：談談關于屬性是什么根據定義主要是進行縮放和轉化能做什么細線代碼頁面適配動畫參考的屬性會影響那些屬性和布局代碼代碼如圖所示可以直接影響到所有帶的屬性，但是由于屬性不談談關于scale屬性 scale是什么？根據W3C定義 ,scale主要是進行縮放和轉化: scale能做什么？ 1.1px細線 CSS代碼 .wrap{ ...

wendux 2019-08-29 11:02 評論0 收藏0
css之簡易水波效果

摘要：后期準備使用面向對象的寫法完成，將水波的大小顏色范圍過渡等效果進行開發者自定義，或許會加入更多的效果 css之水波效果沒事實現了一個小效果，貼上來分享分享先看看效果showImg(https://segmentfault.com/img/bV9FNE?w=526&h=233); 上代碼 :root{ background: #ddd; } body{ posi...

Miracle 2019-08-29 15:14 評論0 收藏0
css3動畫屬性詳解之transform、transition、animation

摘要：動畫屬性詳解關于制作動畫的幾個屬性變形轉換和動畫。一屬性旋轉中心為原點扭曲傾斜縮放移動矩陣變形。各個屬性的用法旋轉其中表示度。承載動畫的另一個屬性。定義動畫的名稱。一個或多個合法的樣式屬性。 css3動畫屬性詳解：關于CSS3制作動畫的幾個屬性：變形(transform)、轉換(transition)和動畫(animation)。一、transform 屬性：旋轉rotate（中...

Riddler 2019-08-30 12:46 評論0 收藏0
設計模式---狀態模式在web前端中的應用

摘要：以上就是狀態模式在實際開發中得應用，我們結合了綜合應用狀態模式。在vue.js之類的mvvm的框架大行其道的當下，開發中最常見的場景就是通過改變數據來展示頁面或模塊的不同狀態，當我們把mvvm玩的不亦樂乎的時候，有時也會停下了想想：在某些項目中不能用vuejs之類的框架時，我們怎么通過改變數據來修改頁面或者模塊的狀態呢。嗯。說到狀態，就想到了狀態模式狀態模式: 在很多情況下，一個對...

劉東 2019-08-21 10:56 評論0 收藏0
設計模式---狀態模式在web前端中的應用

摘要：以上就是狀態模式在實際開發中得應用，我們結合了綜合應用狀態模式。在vue.js之類的mvvm的框架大行其道的當下，開發中最常見的場景就是通過改變數據來展示頁面或模塊的不同狀態，當我們把mvvm玩的不亦樂乎的時候，有時也會停下了想想：在某些項目中不能用vuejs之類的框架時，我們怎么通過改變數據來修改頁面或者模塊的狀態呢。嗯。說到狀態，就想到了狀態模式狀態模式: 在很多情況下，一個對...

silvertheo 2019-08-01 15:29 評論0 收藏0