成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

談?wù)勱P(guān)于CSS中transform屬性之scale

zacklee / 1221人閱讀

摘要：談?wù)勱P(guān)于屬性是什么根據(jù)定義主要是進(jìn)行縮放和轉(zhuǎn)化能做什么細(xì)線(xiàn)代碼頁(yè)面適配動(dòng)畫(huà)參考的屬性會(huì)影響那些屬性和布局代碼代碼如圖所示可以直接影響到所有帶的屬性，但是由于屬性不

談?wù)勱P(guān)于scale屬性 scale是什么？

根據(jù)W3C定義 ,scale主要是進(jìn)行縮放和轉(zhuǎn)化:

scale能做什么？ 1.1px細(xì)線(xiàn)

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.頁(yè)面適配 
  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.動(dòng)畫(huà)(參考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的屬性會(huì)影響那些屬性和布局

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屬性不會(huì)引起重排，會(huì)導(dǎo)致父元素的高度和寬度都不會(huì)受到影響.

scale和zoom差異
1.zoom引起重排，scale不會(huì)引起；縮放的中心點(diǎn)，zoom不能更改，而scale可以更改


2.重排導(dǎo)致的性能

1.scale會(huì)只會(huì)引起了當(dāng)前元素


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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49945.html

相關(guān)文章

  • 談?wù)?/em>關(guān)于CSS中transform屬性之scale

    摘要：談?wù)勱P(guān)于屬性是什么根據(jù)定義主要是進(jìn)行縮放和轉(zhuǎn)化能做什么細(xì)線(xiàn)代碼頁(yè)面適配動(dòng)畫(huà)參考的屬性會(huì)影響那些屬性和布局代碼代碼如圖所示可以直接影響到所有帶的屬性，但是由于屬性不 談?wù)勱P(guān)于scale屬性 scale是什么？ 根據(jù)W3C定義 ,scale主要是進(jìn)行縮放和轉(zhuǎn)化: scale能做什么？ 1.1px細(xì)線(xiàn) CSS代碼 .wrap{ ...

    wendux 評(píng)論0 收藏0

  • css之簡(jiǎn)易水波效果

    摘要：后期準(zhǔn)備使用面向?qū)ο蟮膶?xiě)法完成，將水波的大小顏色范圍過(guò)渡等效果進(jìn)行開(kāi)發(fā)者自定義，或許會(huì)加入更多的效果 css之水波效果 沒(méi)事實(shí)現(xiàn)了一個(gè)小效果，貼上來(lái)分享分享 先看看效果showImg(https://segmentfault.com/img/bV9FNE?w=526&h=233); 上代碼 :root{ background: #ddd; } body{ posi...

    Miracle 評(píng)論0 收藏0

  • css3動(dòng)畫(huà)屬性詳解之transform、transition、animation

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

    Riddler 評(píng)論0 收藏0

  • 設(shè)計(jì)模式---狀態(tài)模式在web前端中的應(yīng)用

    摘要：以上就是狀態(tài)模式在實(shí)際開(kāi)發(fā)中得應(yīng)用，我們結(jié)合了綜合應(yīng)用狀態(tài)模式。 在vue.js之類(lèi)的mvvm的框架大行其道的當(dāng)下，開(kāi)發(fā)中最常見(jiàn)的場(chǎng)景就是通過(guò)改變數(shù)據(jù)來(lái)展示頁(yè)面或模塊的不同狀態(tài)，當(dāng)我們把mvvm玩的不亦樂(lè)乎的時(shí)候，有時(shí)也會(huì)停下了想想：在某些項(xiàng)目中不能用vuejs之類(lèi)的框架時(shí)，我們?cè)趺赐ㄟ^(guò)改變數(shù)據(jù)來(lái)修改頁(yè)面或者模塊的狀態(tài)呢。嗯。說(shuō)到狀態(tài)，就想到了狀態(tài)模式 狀態(tài)模式: 在很多情況下，一個(gè)對(duì)...

    劉東 評(píng)論0 收藏0

  • 設(shè)計(jì)模式---狀態(tài)模式在web前端中的應(yīng)用

    摘要：以上就是狀態(tài)模式在實(shí)際開(kāi)發(fā)中得應(yīng)用，我們結(jié)合了綜合應(yīng)用狀態(tài)模式。 在vue.js之類(lèi)的mvvm的框架大行其道的當(dāng)下，開(kāi)發(fā)中最常見(jiàn)的場(chǎng)景就是通過(guò)改變數(shù)據(jù)來(lái)展示頁(yè)面或模塊的不同狀態(tài)，當(dāng)我們把mvvm玩的不亦樂(lè)乎的時(shí)候，有時(shí)也會(huì)停下了想想：在某些項(xiàng)目中不能用vuejs之類(lèi)的框架時(shí)，我們?cè)趺赐ㄟ^(guò)改變數(shù)據(jù)來(lái)修改頁(yè)面或者模塊的狀態(tài)呢。嗯。說(shuō)到狀態(tài)，就想到了狀態(tài)模式 狀態(tài)模式: 在很多情況下，一個(gè)對(duì)...

    silvertheo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<