谈谈关于CSS中transform属性之scale

wendux 发布于2019-08-29 11:02 / 3325人阅读

摘要：谈谈关于属性是什么根据定义主要是进行缩放和转化能做什么细线代码页面适配动画参考的属性会影响那些属性和布局代码代码如图所示可以直接影响到所有带的属性，但是由于属性不

谈谈关于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属性值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111379.html

谈谈关于CSS中transform属性之scale

摘要：谈谈关于属性是什么根据定义主要是进行缩放和转化能做什么细线代码页面适配动画参考的属性会影响那些属性和布局代码代码如图所示可以直接影响到所有带的属性，但是由于属性不谈谈关于scale属性 scale是什么？根据W3C定义 ,scale主要是进行缩放和转化: scale能做什么？ 1.1px细线 CSS代码 .wrap{ ...

zacklee 2019-08-01 15:30 评论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