zoukankan      html  css  js  c++  java
  • transform总结

    1. 用jquery的css方法获取transform得到的是矩阵matrix,不利于获取translate的值,
    优先使用dom.style.webKitTransform进行transform的读写

    2. 从transform中读取translate的值方法

    //jquery版本
    function fGetTranslate($obj,type){
        var transformMatrix = obj.css("-webkit-transform") ||
                                obj.css("-moz-transform")    ||
                                obj.css("-ms-transform")     ||
                                obj.css("-o-transform")      ||
                                obj.css("transform");
        var matrix = transformMatrix.replace(/[^0-9-.,]/g, '').split(',');
        var x = matrix[12] || matrix[4]; //translate x
        var y = matrix[13] || matrix[5]; //translate y
        if(type == 'x'){
            return x;
        }
        else if(type == 'y'){
            return y;
        }   
        return '';
    }
    //dom版本
    function fGetTranslate(obj,type){
        var transform = obj.style.webkitTransform || obj.style.transform;
        var aTrans = transform.replace(/[^0-9-.,]/g, '').split(','),
            res = '';
        switch(type){
            case 'x':
                res = parseInt(aTrans[0]);
                break;
            case 'y':
                res = parseInt(aTrans[1]);
                break;
            case 'z':
                res = parseInt(aTrans[2]);
                break;
            default:
                break;
        } 
        return res || '';
    }

     3.tansform的效果会按照层级进行叠加,在父元素上的动画会叠加到子元素上,子元素上的多个动画也可以拆分为

    多层元素的多个动画

    <div style="transform:translate(-10px,-20px) scale(2) rotate(45deg) translate(5px,10px)"></div>

    其变换结果等效于:

    <div style="transform:translate(-10px,-20px)">
        <div style="transform:scale(2)">
            <div style="transform:rotate(45deg)">
                <div style="transform:translate(5px,10px)">
                </div>
            </div>
        </div>
    </div>

    4.transform动画的逆转,必须将父元素的transform值倒过来写,值改为负值

    <div style="transform:rotate(30deg) skew(45deg)">
        <div style="transform:skew(-45deg) rotate(-30deg)">
        </div>
    </div>

    5.transform-origin与translate的等价性

    transformation matrix是这样计算规则:

    [1] 从一个单位矩阵(identity matrix)开始
    [2] 根据transform-origin的x、y、z坐标值,进行平移(translate)
    [3] 从左向右依次对transform里的变换函数执行乘法
    [4] 根据transform-origin的x、y、z坐标值,进行反向平移

    transform-origin是使用translate进行两次方向相反的平移,transform-origin是translate的语法糖。

    .avatar{
        transform: rotate(30deg);
        transform-origin: 200px 300px;
    }

    等效于:

    .avatar{
        transform: translate(200px, 300px) rotate(30deg) translate(-200px, -300px);
        transform-origin: 0 0;
    }

    6.transform的matrix的含义

    transform: matrix(a,b,c,d,e,f)

    e和f 代表着偏移量translate,x和y轴
    a和d 代表着缩放比例scale,x 和y轴
    b和c 代表着斜切skew(具体参数和角度关系为, b-->tanθ y轴 c-->tanθ x轴 ,我们具体操作的时候还是要使用小数的)
    abcd 四个参数代表着旋转,旋转 = 缩放 + 斜切(具体关系待查)

    参考:https://segmentfault.com/a/1190000007421401
         https://segmentfault.com/a/1190000010688390?_ea=2553323

  • 相关阅读:
    CQUOJ 10819 MUH and House of Cards
    CQUOJ 9920 Ladder
    CQUOJ 9906 Little Girl and Maximum XOR
    CQUOJ 10672 Kolya and Tandem Repeat
    CQUOJ 9711 Primes on Interval
    指针试水
    Another test
    Test
    二分图匹配的重要概念以及匈牙利算法
    二分图最大匹配
  • 原文地址:https://www.cnblogs.com/mengff/p/7520609.html
Copyright © 2011-2022 走看看