zoukankan      html  css  js  c++  java
  • 谈谈关于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;
         200px;
        height: 50px;
        border-bottom:1px solid #000;
    }
    .UI_scale2{
        position:relative;
        top: 0px;
        left: 0px;
         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;
         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;
         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会引起重排,所以会影响全部元素
    图片描述

  • 相关阅读:
    (转)学习笔记viewController(欢迎指错)
    配置Xcode版本控制SVN详细步骤内含解决Xcode/Mac OS10.8无法配置SVN的解决方法(转)
    iPhone 3G/3GS(有锁)基带与导航功能
    [转]Iphone 3G/3Gs Home键失灵的根本原因和解决方法
    NSDate的常用用法(转)
    短信操作(转)
    如何在Symbian SDK下使用GCCE4(转)
    nS60_sdk_v1_2的VC6问题(转)
    如何获取应用程序图标(转)
    如何实现圆角的UITextView iphone短信发送(非系统界面)
  • 原文地址:https://www.cnblogs.com/10manongit/p/12624344.html
Copyright © 2011-2022 走看看